用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{
            width:560px;
            margin:50px auto;
            overflow:hidden;
            position: relative;
        
        }
        .after:after{
            display: block;
            clear:both;
            content:'';
        }
        .img-box{
        
            list-style: none;
            padding:0;
            width: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;
            width: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();
})