标签：
在网站中有一种图片的展示方式是无限轮播，下面用的是jquery实现
html代码
<div class="banner"> <ul> <li><img src="img/top1.jpg"/></li> <li><img src="img/top2.jpg"/></li> <li><img src="img/top3.jpg"/></li> <li><img src="img/top4.jpg"/></li> <li><img src="img/top5.jpg"/></li> </ul> <ol> <li style="background:#fff;"></li> <li></li> <li></li> <li></li> <li></li> </ol> </div>
css代码
注意：因为我这块截的代码是写在移动端的代码 但是原理是一样的，在css中ul的宽度必须是里面li的宽度和高度的乘积，而外面的banner是每一个li的宽度并且需要用overflow,实现隐藏超出的部分
.banner{width:100%;height:7.745rem;overflow:hidden;position:relative;}
.banner ul{height:7.745rem;}
.banner ul li{width:16rem;height:100%;floaT:left;}
.banner ul li img{width:100%;height:100%;}
.banner ol{width:7.5rem;position:absolute;bottom:10px;left:50%;margin-left:-2.75rem;}
.banner ol li{cursor:pointer;width:0.2rem;margin-right:1rem;height:0.2rem;border-radius:50%;float:left;border:2px solid #fff;}
.banner ol li:hover{background:#fff;}
jquery
说明在当前这个移动之前，将li的第一个复制,并且将复制的放到最后一个，然后开始移动移动完之后，将整个盒子的margin-left值瞬间置为0，然后将li的第一个去掉。
function move(obj){ var li_W=$("."+obj+" ul").find(‘li‘).eq(0).width(); var li_L=$("."+obj+" ul").find(‘li‘).length; $("."+obj+" ul").css("width",li_W*li_L+"px"); var index=0; setInterval(function(){ index++; $("."+obj+" ul li:last").after($("."+obj+" ul li:first").clone(true));//将 第一个复制到最后面 $("."+obj+" ul").animate({"margin-left":-li_W+"px"},1000,function(){ $("."+obj+" ul").css({"margin-left":0+"px"}); $("."+obj+" ul li:first").remove(); $("."+obj+" ol li").css("background","rgba(0,0,0,.0)"); index=index>=5?0:index++; $("."+obj+" ol li").eq(index).css("background","#fff"); }); },2000); };
move("banner");
标签：
原文地址：http://www.cnblogs.com/sunzyx/p/5653363.html
