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

時間 2019-11-20

標籤圖片信手拈來 jquery 欄目 JQuery 简体版

原文原文鏈接

製做圖片輪播，能夠說是js或者jquery學習者應該掌握的技巧。但慚愧的是本菜以前一直只知其一;不知其二，這回抽了半天多總結了下分享給你們。雖然標題比較吹牛，但目的是但願你們看了以後製做圖片輪播會很是迅速。javascript

首先申明幾點：css

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

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

2.製做目標是輪播基本的三個功能：1）自動播放 2）光標移入中止播放，移開繼續播放 3）按鈕操做前/後張圖片切換數組

3.製做圖片輪播的方法網上很是多，個人寫法不必定是最簡單的，但確實比較少，思路也算清晰。app

準備工做：函數

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);
    }