JS製作輪播圖

1

       前端用到的編輯器有很多，本例通過選擇Sublime Text3編輯器來實現輪播圖的製作。第一步，開啟電腦中安裝的Sublime Text3，新建demo資料夾用來存放檔案，在裡面新建一個html檔案，通過Tab快捷鍵迅速建立一個html模板，並命名標題。如圖所示：

2

       第二步，在Body中寫簡單的html程式碼。首先在頂部head標籤裡引入外部CSS和JS，注意要引入jQuery庫，並且要放在所寫的js上面，不然不會有效果。然後，在一個div中包裹兩個ul,第一個ul用於顯示圖片，第二個ul則定義頁碼。程式碼如下所示：     

   <div id="scrollPics">

        <ul class="slider">

            <li><img src="images/1.jpg" /></li>

            <li><img src="images/2.jpg" /></li>

            <li><img src="images/3.jpg" /></li>

            <li><img src="images/4.jpg" /></li>

        </ul>

        <ul class="num"></ul>

    </div>

3

        第三步，寫外部CSS。其中，我們設定div的高為 420px，寬為 790px，並且設為相對定位；第二個ul設定絕對定位，並處理好位置。然後第二個ul中的li標籤設定左浮動，以及相關樣式；最後的樣式是通過js新增的類的樣式，即顯示索引對應的圖片的樣式。程式碼如下：      

ul li {

    list-style: none;

}

#scrollPics {

    height: 420px;

    width: 790px;

    margin-bottom: 10px;

    overflow: hidden;

    position: relative;

}

.slider {

    margin-top: 0;

}

.num {

    position: absolute;

    right: 5px;

    bottom: 5px;

}

#scrollPics .num li {

    float: left;

    color: #FF7300;

    text-align: center;

    line-height: 16px;

    width: 16px;

    height: 16px;

    cursor: pointer;

    overflow: hidden;

    margin: 3px 1px;

    border: 1px solid #FF7300;

    background-color: #fff;

}

    #scrollPics .num li.on {

        color: #fff;

        line-height: 21px;

        width: 21px;

        height: 21px;

        font-size: 16px;

        margin: 0 1px;

        border: 0;

        background-color: #FF7300;

        font-weight: bold;

    }

4

       第四步，開始寫核心的JS程式碼。首先定義幾個全域性變數。其中，imgCon表示獲取到對應的圖片存放的變數，並且初始化，除第一張圖片外其他隱藏；num變數則用來定義頁碼；len 定義圖片個數； index 表示索引。如圖所示：

    var slider = $('#scrollPics .slider');

    var imgCon = $('#scrollPics .slider li');  //獲取圖片

    imgCon.not(imgCon.eq(0)).hide();  //除第一張其他隱藏

    var num = $('#scrollPics .num'); //定義頁碼

    var len = slider.find('li').length;

    var html_page = '', index = 0;

5

       第五步，我們要實現的效果是，圖片自動輪播，所以需要獲取到對應的索引的值，然後設定計時器，每隔兩秒切換到下一個圖片。如果到了最後面一張圖片，則索引值又變成0，即切換到第一張圖片，如此規律迴圈。如圖所示：

       for (var i = 0; i < len; i++) {

        if (i === 0) {

            html_page += '<li class=on >' + (i + 1) + '</li>';

        } else {

            html_page += '<li>' + (i + 1) + '</li>';

        }

    }

  window.timer = setInterval(function () {

            showPic(index);

            index++;

            if (index === len) {

                index = 0;

            }

        }, 2000);

6

       第六步，當我們點選或滑鼠移動到某個索引處時，顯示相應的索引對應的圖片，並且旁邊的圖片隱藏，然後為該索引新增一個類的樣式，相應的兄弟節點移除對應的樣式；接著新增一個滑鼠移動事件，用來獲取索引，以及顯示索引對應的圖片。程式碼如下圖所示： 

   //顯示索引對應的圖片

    function showPic(index) {

        imgCon.eq(index).show().siblings("li").hide();

        num.find("li").eq(index).addClass('on').siblings("li").removeClass("on");

    }

    //頁碼按鈕移入

    $('.num li').mouseover(function () {

        index = $(this).index();   //獲取索引

        showPic(index);

    });

7

       最後，觸發被選元素的指定事件。滑鼠移動到相應的索引處時，清除計時器，顯示相應的圖片。否則，繼續執行計時器事件，每隔兩秒，索引增加一個單位，展示相應的圖片，迴圈圖片輪播。程式碼如下圖所示：

 $('#scrollPics').hover(function () {

        clearInterval(window.timer);

    }, function () {

        window.timer = setInterval(function () {

            showPic(index);

            index++;

            if (index === len) {

                index = 0;

            }

        }, 2000);

    }).trigger('mouseleave');     //觸發被選元素的指定事件

8

        至此，完整的js程式碼就完成了，程式碼如下。同時，完整的輪播圖程式碼也就完成了。我們檢查程式碼無誤後，切換到html檔案，右擊，或在資料夾中雙擊檔案，在瀏覽器中檢視效果，效果如圖所示（其實每寫完一步程式碼就應該檢視效果，即偵錯。）。

    $(function () {

    var slider = $('#scrollPics .slider');

    var imgCon = $('#scrollPics .slider li');  //獲取圖片

    imgCon.not(imgCon.eq(0)).hide();  //除第一張其它隱藏

    var num = $('#scrollPics .num'); //定義頁碼

    var len = slider.find('li').length;

    var html_page = '', index = 0;

    //新增頁碼

    for (var i = 0; i < len; i++) {

        if (i === 0) {

            html_page += '<li class=on >' + (i + 1) + '</li>';

        } else {

            html_page += '<li>' + (i + 1) + '</li>';

        }

    }

    num.html(html_page);

    //顯示索引對應的圖片

    function showPic(index) {

        imgCon.eq(index).show().siblings("li").hide();

        num.find("li").eq(index).addClass('on').siblings("li").removeClass("on");

    }

    //頁碼按鈕移入

    $('.num li').mouseover(function () {

        index = $(this).index();   //獲取索引

        showPic(index);

    })

    $('#scrollPics').hover(function () {

        clearInterval(window.timer);

    }, function () {

        window.timer = setInterval(function () {

            showPic(index);

            index++;

            if (index === len) {

                index = 0;

            }

        }, 2000);

    }).trigger('mouseleave');     //觸發被選元素的指定事件

});

       附：本經驗關鍵詞：怎樣做輪播圖、輪播圖怎麼做、輪播圖實現原理、jquery輪播圖程式碼、JS做輪播圖、輪播圖自動播放、圖片輪播怎麼做、怎樣製作圖片輪播、js如何製作圖片輪播、JS怎麼製作輪播圖、JS輪播圖、輪播圖JS、JS製作輪播圖。

        附：可以點選下面「經驗參照」參考我的另一篇經驗「如何用Bootstrap製作輪播圖」