繼上次整理慕課網視訊的tabs切換實現之後，今天整理一下極客學院的基於Jquery的輪播圖的實現。

主要功能展示：

• 左右按鈕點選實現左右移動
• 輪播圖自動左右切換
• 無縫輪播
• 去除快速點選切換導致的卡頓

一、基本頁面結構和樣式的設計

<div class="banner">
    <ul class="img">
        <li><a href="#"><img src="img/img1.jpg"></a></li>
        <li><a href="#">
 
<img src="img/img2.jpg"></a></li>
        <li><a href="#"><img src="img/img3.jpg"></a></li>
        <li><a href="#"><img src="img/img4.jpg"></a></li>
    </ul>

    <ul class="num">

    </ul>

    <div class="btn btn_l"
 
>&lt;</div>
    <div class="btn btn_r">&gt;</div>
</div>

*{padding:0;margin: 0;list-style: none;}
.banner{ position: relative;overflow:hidden;margin: 100px auto;border: 5px solid #000;width: 550px;height: 300px;}
.banner .img{position:absolute;width: 5000px;left: 0;top:0;}
.banner
 
 .img li{float: left;}

.banner .num{position: absolute;width:100%;bottom: 10px;text-align: center;font-size: 0px;
    left:0;}
.banner .num li{width: 10px;height: 10px;background: #888;border-radius: 50%;display: inline-block;margin: 0 3px;cursor: pointer;}
.banner .num li.onPoint{background: #F60;}

.banner .btn{position:absolute;display:none;width: 30px;height: 50px;line-height:50px;background:rgba(0,0,0,0.5);color:#fff;font-size:30px;top: 50%;margin-top: -25px;text-align: center;font-family: "宋體";}
.banner .btn_l{left:0;}
.banner:hover .btn{display: block;}
.banner .btn_r{right: 0;}

二、js部分的實現

$(document).ready(function () {
    var i = 0;
    var clone = $(".banner .img li").first().clone();
    $(".banner .img").append(clone);
    var liLength = $(".banner .img li").length;
    for(var j = 0;j<liLength - 1;j++){
        $(".banner .num").append("<li></li>")
    }
    $(".banner .num li").first().addClass("onPoint");

    /* 滑鼠劃入圓點 */
    $(".banner .num li").hover(function () {
       var index = $(this).index();
       i = index;
       $(".banner .img").animate({left:-index * 550},550);
       $(".banner .num li").eq(index).addClass("onPoint").siblings().removeClass("onPoint");
    });

    /* 自動輪播 */
    var t = setInterval(moveL,3000);

    /* 對banner定時器的操作 */
    $(".banner").hover(function () {
        clearInterval(t);
    },function () {
        t = setInterval(moveL,3000);
    });

    var timer = null;
    /* 向左的按鈕 */
    $(".banner .btn_l").click(moveL);
    // $(".banner .btn_l").click(function () {
    //     clearTimeout(timer);
    //     timer = setTimeout(function () {
    //         moveL();
    //     },300);
    // });
    // $(".banner .btn_l").dblclick(function () {
    //     clearTimeout(timer);
    // });

    function moveL() {
        i++;
        if(i == liLength){
            $(".banner .img").css({left:0});
            i = 1;
        }
        // $(".banner .img").animate({left:-550*i},550);
        $(".banner .img").stop().animate({left:-550*i},550);
        if(i == liLength - 1){
            $(".banner .num li").eq(0).addClass("onPoint").siblings().removeClass("onPoint");
        }else {
            $(".banner .num li").eq(i).addClass("onPoint").siblings().removeClass("onPoint");
        }
    }

    /* 向右的按鈕 */
    $(".banner .btn_r").click(moveR);
    // $(".banner .btn_r").click(function () {
    //     clearTimeout(timer);
    //     timer = setTimeout(function () {
    //         moveR();
    //     },300);
    // });
    // $(".banner .btn_r").dblclick(function () {
    //     clearTimeout(timer);
    // });

    function moveR() {
        i--;
        if(i == -1){
            $(".banner .img").css({left:-(liLength - 1)*550});
            i = liLength - 2;
        }
        // $(".banner .img").animate({left:-i*550},550);
        $(".banner .img").stop().animate({left:-i*550},550);
        $(".banner .num li").eq(i).addClass("onPoint").siblings().removeClass("onPoint");
    }
});

注意點

1.我們點選按鈕實現左右移動的動畫的時候，需要在animate()之前加上stop()方法；因為在快速點選的時候，
如果沒有加上stop()方法，輪播圖就會容易出現卡頓的時候或者一些意向不到的情況。除了stop()方法，
我們也可以在點選事件的方法中加上一個延時器並且禁止連續雙擊事件也可以實現，不過，稍微麻煩一點。
個人建議stop()。

2.

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

如上，這樣的排列，<li>之間的換行或者空格符也屬於字元，在頁面顯示的時候就會出現空格。<ul>樣式設定font-size = 0；就會清除空格樣式。因為行框的排列會收到中間的影響，這些空白也會被應用樣式佔據空間，所以會有間隔。
3.示例程式碼見github：https://github.com/qiuxiaoxiao/jquery_Carousel.git