Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
ul,ol {
	list-style:none;
}
#play {
	width:500px;
	height:300px;
	margin:20px auto;
	position:relative;
	overflow:hidden;
}
#play #ul {
	position:absolute;
}
#play #ul li {
	float:left;
}
#play #ul li img {
	width:500px;
	height:300px;
}
#play #ol {
	position:absolute;
	top:500px;
	left:350px;
}
#play #ol li {
	width:10px;
	height:10px;
	border-radius:50%;
	border:2px solid green;
	float:left;
	margin:5px;
}
#play button {
	position:absolute;
	top:120px;
	font-size:50px;
	display:none;
}
#play #prev {
	left:10px;
}
#play #next {
	right:10px;
}
.bg {
	background:red;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.8.3
 立即下载

简单的jQuery轮播图

jQuery库没有具体要求,复制代码可以直接使用,把图片替换成自己的就行。

3
      insist0
      2018/2/17 13:39:34

      代码中为什么是i == -1,为什么是减2个长度单位。为什么到了left又是减一个

      if (i == -1) {
          i = $('#ul li').length - 2;
          $('#ul').css({
              left: ($('#ul li').length - 1) * -800
          });
      }
      回复
      那谁,站住0
      2017/4/17 19:11:01

      不错,很适合自己做个性化

      回复
      亿0
      2017/4/14 11:42:24