用js数组实现最原始的图片轮播实现

上班以来看到了，写了很多的轮播图效果，实现方法大致有

1.将图片局对定位，利用z-index和opacity实现图片渐现

2.用css3 的transtion：Xx xx left/right,实现左右方向滑动轮播（淘宝）

3.在图片组的前后，各加一张图片，实现无缝连接

4.通过改变图片组外层的margin或者left值实现

今天我要写的是第四种，现在概观大部分网站，已经几乎没有这种实现方法了，因为逻辑比较复杂，而且比较消耗性能（需要不停的修改数组，然后遍历到页面上），今天写它的目的，只是想要挑战下自己，因为真的很久没有写过了

首先，先明确下实现思路

1.初始状态，如下图

红色是显示区域，需要设置overflow：hidden控制只显示一张

黑色的是四张图片，通过浮动，变成一排

html，css代码如下

        body,div{
            padding:0;
            margin:0;
        }
        .container{
            560px;
            margin:50px auto;
            overflow:hidden;
            position: relative;
        
        }
        .after:after{
            display: block;
            clear:both;
            content:'';
        }
        .img-box{
        
            list-style: none;
            padding:0;
            calc(560px*4);
            margin-left:0;
        }
        .img-box li{
            float:left;
        }
       .dot{
            position: absolute;
            bottom:30px;
            margin:auto;
            left:0;
            right:0;
            padding:0;
        }
        .dot li{
            list-style: none;
            padding:0;
            float:left;
            30px;
            height:30px;
            text-align: center;
            line-height:30px;
            border-radius: 50%;
            background:#ccc;
            color:#333;
            margin-left:5px;
            cursor:pointer;
        }
        .dot li:hover{
             background:#666;
            color:#fff;
        }
        .dot li.current{
            background:#666;
            color:#fff;
        }

  <div class='container'>
    <ul class='img-box after'>
        <li>
            <img src="imgs/1.png" alt="">
        </li>
        <li>
            <img src="imgs/2.png" alt="">
        </li>
        <li>
            <img src="imgs/3.png" alt="">
        </li>
        <li>
            <img src="imgs/4.png" alt="">
        </li>
    </ul> 
 　　<ul class='dot after'>
        <li class='current'>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
  </div>

2，通过改变ul的margin-left值来实现图片移动，每隔固定的时间改变ul的margin值为图片的宽度

可是当移动到最后一张时，后面没有图片了，就会一片空白。

如果加上判断：移动到最后一张时，再进行移动就默认移入到第一张，虽然可以实现，但是效果很差，不是我想要的效果

利用js的数组可以实现预期的效果：

向左移动：

1.将轮播图的图片地址储存到数组arr中

2.每轮播一次，就将第一张图片放到最后，在数组中对应，将数组中的第一个元素删除，拼接到最后一个，将数组遍历到页面上；

3.重新设置margin-left为0；

如下图：

向右移动（ul向右移动）：

 向右移动和想左不同：

首先将最后一张图片放到最前面，对应数组就是将数组中最后一个元素删除拼接到arr的最前面，

然而此时ul的margin-left仍然是0；所以要将ul的margin-left改为负的图片宽度，（虽然移动了ul但是只是一瞬间的，而且当前图片没有变化）

最后将ul向右移动至margin-left改变至0；完成向右移动

思路明确后就可以一步一步的向下做了

1.首先实现自动轮播（每次想左轮播一张图片）

2.然后实现点击索引值轮播（想左轮播不止一张图片）

3.点击索引值实现向右轮播

js代码如下：

$(document).ready(function(){
    var scroll={
        ImgArr:[],//储存图片地址的数组
        timer:null,//第一个定时器，表示每隔一段时间，轮播一次
        distance:0,//轮播的距离
        interval:20,//每段动画的时间
        time:2000,//每段轮播的总时间
        JG:4000,//每段轮播停留的时间
        FIRST:1,
        current:1,
        timer2:null,//第二个定时器，轮播时的动画
        init:function(){
            var me=this;
            me.calc();//计算下面索引所占的宽度
            me.timer=setInterval(function(){//自动轮播
                me.change_dot();//改变索引的状态
                me.next(1);//每次轮播一张

            },me.JG)
            $(".dot li").mouseover(function(){//鼠标停留时，停止自动轮播
                clearInterval(me.timer);
            })
            $(".dot li").click(function(){
                clearInterval(me.timer);
                me.timer=null;
                console.log(me.timer2);
                var num=$(this).text();
                    me.current=$(".dot li.current").text();
                    var step=num-me.current;
                if(me.timer2===null){//只有当轮播结束时才能进行第二次轮播，以防止出现bug
                    
                    if(step>0){
                        me.next(step);
                    }else if(step<0){
                        me.prev(step);
                    }
                
                    
                    $(".dot li").removeClass("current");
                    $(this).addClass("current");
                }
                
            })
        },
        sort_arr:function(step){//滚动后重新排列数组
            var me=this;
            for(var n=0;n<$(".container li img"). length;n++){
                me.ImgArr[n]=$(".container li img").eq(n).attr("src");
            }
            var html='';
            var slice=me.ImgArr.slice(0,step);
            me.ImgArr=me.ImgArr.concat(slice);
            me.ImgArr.splice(0,step);
            for(var i=0;i<me.ImgArr.length;i++){
                html+="<li><img src="+me.ImgArr[i]+"></li>";
            }
            $(".container .img-box").html("");
            $(".container .img-box").append(html);
        }, 
        change_dot:function(){
            var arr=$(".img-box li img").eq(0).attr("src").split("/");
            console.log(arr[arr.length-1].split(".")[0]);
            var num=arr[arr.length-1].split(".")[0];
            if(num=='4'){
                num=0;
                
            }
            $(".dot li").removeClass("current");
            $(".dot li").eq(num).addClass("current");
            
        },
        next:function(step){//向左移动
            var me=this;


            me.distance=$(".container li img").eq(0).width();
            
            var times=me.time/me.interval;
            var smalldistance=(me.distance*step)/times;
            me.timer2=setInterval(function(){
                if(me.FIRST<=times){
                    
                    $(".container .img-box").css("margin-left",'-'+me.FIRST*smalldistance+"px");
                    me.FIRST++;
                    
                }else{
                    clearInterval(me.timer2)
                    me.timer2=null;
                    me.FIRST=1;
                    $(".container .img-box").css("margin-left","0")
                    me.sort_arr(step);
                    
                }
            },me.interval)
        },
        prev:function(step){//向右移动
            var me=this;
            me.distance=$(".container li img").eq(0).width();
            var length=$(".container .img-box li").length;
            for(var n=0;n<$(".container li img"). length;n++){
                me.ImgArr[n]=$(".container li img").eq(n).attr("src");
            }
            var slice_arr=me.ImgArr.slice(me.ImgArr.length+step);
            for(var m=1;m<=-step;m++){
                $(".container li").eq(length-m).remove();
            }
            var html="";
            for(var i=0;i<slice_arr.length;i++){
                html+="<li><img src="+slice_arr[i]+"></li>";
            }
            $(".container .img-box").prepend(html);
            $(".container .img-box").css("margin-left",step*me.distance+'px');
            
            me.distance=$(".container li img").eq(0).width();
            var times=me.time/me.interval;
            var smalldistance=(me.distance*step)/times;//每次移动的小段距离
            me.timer2=setInterval(function() {
                if(me.FIRST<=times){
                    var px=me.FIRST*smalldistance 
                    $(".container .img-box").css("margin-left",step*me.distance-me.FIRST*smalldistance+"px");
                    me.FIRST++;
                }else{//轮播结束时清楚定时器
                    clearInterval(me.timer2);
                    me.timer 2=null;
                    me.FIRST=1; 
                    $(".container .img-box").css("margin-left","0")
                    
                }
                
            },me.interval)
            
        },
        calc:function(){
            var length=$(".dot li").length;
             var every=parseInt($(".dot li").eq(0).width())+parseInt($(".dot li").eq(0).css("margin-left"))
            $(".dot").width(every*length);
        }
    }
    scroll.init();
})