圖片輪播，信手拈來（jquery）

制作圖片輪播，可以說是js或者jquery學習者應該掌握的技巧。但慚愧的是本菜之前一直一知半解，這回抽了半天多總結了下分享給大家。雖然標題比較吹牛，但目的是希望大家看了之后制作圖片輪播會非常迅速。

首先申明幾點：

1.既然使用了jquery，制作方法就不再是最基礎的那種將圖片列表的位置一直改變，比如：切第二張圖片left:-100px，切第三種圖片left:-200px，切第四張圖片left:-300px。

這種方法在從最后一張圖回第一張圖時會快速倒回去，搓爆了。

2.制作目標是輪播基本的三個功能：1）自動播放 2）光標移入停止播放，移開繼續播放 3）按鈕操作前/后張圖片切換

3.制作圖片輪播的方法網上非常多，我的寫法不一定是最簡單的，但確實比較少，思路也算清晰。

 

准備工作：

1.body中寫入如下內容：

 <div id="container">
        <ul id="picList">
            <li><img src="images/1.png"></li>
            <li><img src="images/2.png"></li>
            <li><img src="images/3.png"></li>
            <li><img src="images/4.png"></li>
            <li><img src="images/5.png"></li>
            <li><img src="images/6.png"></li>
            <li><img src="images/7.png"></li>
        </ul>
  </div>

其中外部div表示我們需要的“相框”，ul列表即是圖片列表

2.將相框尺寸設為單張圖片的尺寸；ul寬度設為圖片列表的總寬度，可以在CSS中設置，不過寫在javascript中動態添加也比較好；

   var picArr=$("#picList li");
   $("#picList").css("width",picArr.length*120);

最后讓ul下的li float:left使圖片橫排。

完成之后效果如上，淡綠色的邊框部分就是我們的“相框”。

 

普通寫法：

這種寫法個人認為比較簡單，也比較實用。后面有個高級點的寫法，雖然唬人但也麻煩一些。

    function next(){
        $("#picList li:first-child").animate({
            marginLeft:"-120px"
        },1000,function(){
            var temp=$(this).clone();
            $(this).remove();
            temp.css({marginLeft:"0"});
            $("#picList").append(temp);
        });
    }

解釋下上面的代碼，本例中單張圖片寬120px高190px。

這個next函數即向后播的函數，首先jquery中的animate自定義動畫使圖片列表的第一列左移120px，用時1000毫秒，左移完成后執行接下來的函數：

將圖片列表的第一列克隆存在名為temp的變量中，將第一列刪除。此時克隆后的temp依然保持着之后marginLeft:"-120px"的css樣式，先將其回0，否則在將插到隊尾時會蓋在前一張上。

最后將克隆后的列通過append()插入隊尾。

使用setInterval循環執行next函數：

var intervalObj=window.setInterval(next,2000);

這里之所有用了setInterval是為了之后鼠標放上去后能停止輪播，setInterval的執行間隔時間減去動畫執行過程所用時間即為圖片的切換延遲時間。效果：

將setInterval賦給全局變量intervalObj為了接下來的停止功能：

    $("#container").mouseover(function(){
        window.clearInterval(intervalObj);
    });
    $("#container").mouseout(function(){
        intervalObj=window.setInterval(next,2000);
    });

效果：

接下來在id為container的div中添加按鈕：

     <button onclick="prev()" id="goLeft">←</button>
     <button onclick="next()" id="goRight">→</button>

向右的按鈕即執行上面所寫的next函數，把兩個按鈕加在div中有個好處就是：之前我們是在div上加的mouseover事件，也就是說當我們想要點擊切換上下張時自動播放也會停止，不會和我們的操作起沖突。

向左翻的函數：

    function prev(){
        var temp=$("#picList li:last-child").clone();
        $("#picList li:last-child").remove();
        temp.css({marginLeft:"-120px"});
        $("#picList").prepend(temp);
        $("#picList li:first-child").animate({
            marginLeft:"0"
        },1000);
    }

這里和向右的函數稍微有些區別，我們得在圖片列表右移之前先完成克隆。

首先將圖片列表的最后一列克隆，並將最后一列移除。將克隆后的temp樣式設為-120px，否則插到隊頭時會蓋住第一張。

將克隆的temp通過prepend插入隊頭，注意此時圖片列表的第一張不再是原始的第一張而是剛才插到隊頭的temp，由於temp的marginLeft為-120px，將其變為0。整個圖片列表自然會右移，顯示上一張。

最后將“相框”的overflow設為hidden，一個較完整的輪播就完成了：

整理后的代碼，方便大家一次性COPY：

    var intervalObj=window.setInterval(next,2000);
    var picArr=$("#picList li");
    $("#picList").css("width",picArr.length*120);
    function next(){
        $("#picList li:first-child").animate({
            marginLeft:"-120px"
        },1000,function(){
            var temp=$(this).clone();
            $(this).remove();
            temp.css({marginLeft:"0"});
            $("#picList").append(temp);
        });
    }
    function prev(){
        var temp=$("#picList li:last-child").clone();
        $("#picList li:last-child").remove();
        temp.css({marginLeft:"-120px"});
        $("#picList").prepend(temp);
        $("#picList li:first-child").animate({
            marginLeft:"0"
        },1000);
    }
    $("#container").mouseover(function(){
        window.clearInterval(intervalObj);
    });
    $("#container").mouseout(function(){
        intervalObj=window.setInterval(next,2000);
    });

 

進階寫法：

原理基本是一樣的，只是這回在ul中需要加入兩個li，分別裝第一張、第二張圖片即可。

    <ul id="picList">
         <li><img src="images/1.png"></li>
         <li><img src="images/2.png"></li>
    </ul>

在js中將所有的圖片地址裝入數組中：

    var srcArr=['images/1.png','images/2.png','images/3.png','images/4.png','images/5.png','images/6.png','images/7.png']

定義全局變量picNo=1，在之前所寫的next及prev函數中加入判斷條件：

    function next(){
        picNo++;
        if(picNo==7){
            picNo=0;
        }else if(picNo==8){
            picNo=1;
        }
        $("#picList li:first-child").animate({
            marginLeft:"-120px"
        },1000,function(){
            var temp=$(this).clone();
            $(this).remove();
            temp.css({marginLeft:"0"}).children().attr("src",srcArr[picNo]);
            $("#picList").append(temp);
        });
    }
    function prev(){
        picNo--;
        if(picNo<1){
            picNo=7;
        }
        var temp=$("#picList li:last-child").clone();
        $("#picList li:last-child").remove();
        temp.css({marginLeft:"-120px"}).children().attr("src",srcArr[picNo-1]);
        $("#picList").prepend(temp);
        $("#picList li:first-child").animate({
            marginLeft:"0"
        },1000);
    }

這里picNo作用是提供圖片地址數組的下標索引，這部分有點難講清楚，我也是當初測試了很久才找到了規律。

先看next函數，picNo初值為1，第一次執行next函數時加1變為2，也就是說在接下來要插入的圖片應該為第三張圖片，因為第一、二張已經存在了。

if(picNo==7){picNo=0}表示向下切換到頭時，添加第一張圖片地址。

else if(picNo==8){picNo=1}，加這句是因為在切換時發現個BUG，在從第一張倒切到最后一張，再從最后一張切回第一張時，新插入的不是第二張，而還是第一張。

再看prev函數，由於這里要插入的圖片地址是前一張，所以在最后srcArr的下標索引應為picNo-1。

。。。我講都講暈了，看不懂就看不懂吧，直接拿去用吧。。。

上效果：

總的來說，這種寫法上加入了判斷會稍麻煩點，而且如果網頁沒有刷新好或者點擊過快很容易出現圖片順序錯亂。“炫技”的成份比較重，沒有第一種做法好用。

 

感謝您的瀏覽，也感謝每一個給本菜提出意見的人。