jquery实现图片轮播

在网站中有一种图片的展示方式是无限轮播，下面用的是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{100%;height:7.745rem;overflow:hidden;position:relative;}
.banner ul{height:7.745rem;}
.banner ul li{16rem;height:100%;floaT:left;}
.banner ul li img{100%;height:100%;}
.banner ol{7.5rem;position:absolute;bottom:10px;left:50%;margin-left:-2.75rem;}
.banner ol li{cursor:pointer;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");