圖片輪播之：靜若處子，動若脫兔（爲何我不來寫一篇關於圖片輪播的博客呢？）

    1、閒聊：

        圖片輪播，一個你再熟悉不過的小東西了。或許在你剛開始學習web的時候就能作出來獲得效果。可是你會發現當面對不一樣的需求的時候又要從新寫一個輪播。非常麻煩的對吧。LZ也是這樣學習過來的，發現本身寫的不少輪播的思路都不同了。此次寫出的下一次也許就寫不出來了，或者說是用更好的方式來實現了。下面一塊兒來總結下都有什麼樣的需求。

    2、需求：

        1） 首先是要能循環顯示出來（不考慮循環效果）。

        2）鼠標移到圖片上時中止切換，移開以後又自動開始循環。

        3）帶有圖片標記，兩個做用（一、能夠給用戶提示一共多少張，二、能夠知道當前展現獲得是第幾張）。

        4）帶有切換按鈕，當用按鈕點擊的時候就取消自動循環。讓用戶自由操做（切換按鈕須要以上後出現，移開消失）。

    3、思路：

        之前再最開始的時候作輪播是直接改變的圖片 url 地址，可是如今不能這樣作了。爲何？由於沒當變化一下url地址瀏覽器就會發送一個請求道服務器區拉取這個圖片，這樣對於性能來講是很很差的。因此不能這樣作。Now 那就經過移動圖片吧。個人思路（也是在借鑑的基礎上）將全部的圖片聯合成一副大的圖片，這樣只須要移動一副大的圖片就能夠實現輪播了。下面一塊兒來看看怎樣實現吧！

    4、實現步驟：

    HTML： 

<!--picture-loop-wrapper-->
    <div class="picture-loop-wrapper"> //外部循環顯示盒子
        <ul class="imgBox">            //組合長圖盒子
            <li id="img1"><a href="#"><img src="img/1.jpg"></a></li>
            <li id="img2"><a href="#"><img src="img/2.jpg"></a></li>
            <li id="img3"><a href="#"><img src="img/3.jpg"></a></li>
            <li id="img4"><a href="#"><img src="img/4.jpg"></a></li>
            <li id="img5"><a href="#"><img src="img/5.jpg"></a></li>
        </ul>
        <div class="currentNum">        //顯示標記盒子
            <span class="imgNum mark-color"></span>
            <span class="imgNum"></span>
            <span class="imgNum"></span>
            <span class="imgNum"></span>
            <span class="imgNum"></span>
        </div>
        <div class="control to-left"><img src="img/left-arrow.png"/></div>    //切換按鈕組
        <div class="control to-right"><img src="img/right-arrow.png"/></div>
    </div>

    分析：首先是外部的（picture-loop-wrapper）一個顯示的盒子，控制顯示的窗口大小。裏面的 ul 這個就是把全部的圖片組合起來做爲一張長圖。

    CSS： 

ul{
    margin: 0;    //消除自帶的間距
    padding: 0;
}
/*picture-loop-wrapper*/
.picture-loop-wrapper{    //外部顯示區域
    position: relative;
    width: 520px;
    height: 280px;
    overflow: hidden;    /*這裏很重要，控制顯示的範圍*/
}
.imgBox{
    position: absolute;    //這裏由於後面使用的是 left 屬性
    width: 2600px;    /*組合長圖，由於我是5張圖，每張520px，因此長圖就是5*520 = 2600px*/
    list-style-type: none;
}
.imgBox > li{
    float: left;     /*實現一排顯示，由於li是塊元素，因此採起浮動*/
    width: 520px;
}
.imgBox a{
    display: inline-block;     /*這裏是爲了不懸空，由於a是內聯元素不會被撐開*/
}
.control{
    position: absolute;     /*絕對與wrapper盒子定位，實如今上面浮動*/
    top: 50%;
    margin-top: -20px;     /*錘子居中*/
    left: 20px;
    background: #000;
    opacity: .3;
    text-align: center;
    width: 40px;
    height: 40px;
    display: none;
    cursor: pointer;
}
.control img{
    margin-top: 8px;   /*圖片居中*/
}
.control:hover{
    opacity: .8;
}
.to-right{
    left: 450px;
}
/*currentNum*/
.currentNum{
    position: absolute;
    left: 50%;
    top: 250px;
    margin-left: -35px;
    width: 70px;
    height: 11px;
}
/*spanNum*/
.imgNum{
    display: inline-block;
    float: left;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-radius: 9px;
    background: #b7b7b7;
    cursor: pointer;
}

.mark-color{
    background: #f40;
}

    分析：css代碼沒什麼可說的，主要就是注意 定位的使用。補充（在Position屬性值爲absolute的同時，若是有一級父對象（不管是父對象仍是祖父對象，或者再高的輩分，同樣）的Position屬性值爲Relative時，則上述的相對瀏覽器窗口定位將會變成相對父對象定位，這對精肯定位是頗有幫助的。）和 overflow 的使用。

    JS:

$(document).ready(function(){
    var $iBox = $('.imgBox'),
        $iNum = $('.imgNum'),  //緩存優化
        indexImg = 1,          //初始下標
        totalImg = 5,          //圖片總數量
        imgSize = 520,         //圖片尺寸 寬度
        moveTime = 1100,        //切換動畫時間
        setTime = 2500,        //中間暫停時間
        clc = null;

    function moveImg(){
        if(indexImg != totalImg){
            $iBox.animate({
                left: -(indexImg*imgSize) + 'px'
            }, moveTime);
            $iNum.removeClass('mark-color')
                .eq(indexImg)
                .addClass('mark-color');
            indexImg++;
        }
        else{
            indexImg = 1;
            $iNum.removeClass('mark-color')
                .eq(indexImg - 1)
                .addClass('mark-color');
            $iBox.animate({
                left: 0
            }, moveTime);
        }
    }
    $iNum.hover(function(){              //鼠標放在下方標記上面
        $iBox.stop();                    //結束當前動畫
        clearInterval(clc);              //暫停循環
        $iNum.removeClass('mark-color');
        $(this).addClass('mark-color');
        indexImg = $(this).index();
        $iBox.animate({
            left: -(indexImg*imgSize) + 'px'
        }, 500);
    },function(){
        clc = setInterval(moveImg, setTime);
    });

    //鼠標放在圖片上中止動畫
    $iBox.hover(function(){
        $('.control').fadeIn(200);       //出現切換按鈕
        clearInterval(clc);              //暫停循環
    },function(){
        $('.control').hide();            //隱藏切換
        clc = setInterval(moveImg, setTime);
    });
    //顯示左右
    $('.control').hover(function(){       //放在切換按鈕上中止動畫和循環
        clearInterval(clc);
        $('.control').show();
//        return false;容許傳播
    });
    //向右邊前進
    $('.to-right').click(function(){
        if(indexImg != totalImg){
            $iBox.animate({
                left: -(indexImg*imgSize) + 'px'
            }, moveTime);
            $iNum.removeClass('mark-color')
                .eq(indexImg)
                .addClass('mark-color');
            indexImg++;
        }
        else{
            indexImg = 1;
            $iNum.removeClass('mark-color')
                .eq(indexImg - 1)
                .addClass('mark-color');
            $iBox.animate({
                left: 0
            }, moveTime);
        }
    });
    //向左邊前進
    $('.to-left').click(function(){
        indexImg--;              //下標減一
        if(indexImg != 0){
            $iBox.animate({
                left: -((indexImg - 1)*imgSize) + 'px'
            }, moveTime);
            $iNum.removeClass('mark-color')
                .eq((indexImg - 1))
                .addClass('mark-color');
        }
        else{
            indexImg = totalImg;
            $iNum.removeClass('mark-color')
                .eq(indexImg - 1)
                .addClass('mark-color');
            $iBox.animate({
                left: -((indexImg - 1)*imgSize) + 'px'
            }, moveTime);
        }
    });
    clc = setInterval(moveImg, setTime);   //自動循環圖片切換
});

    示意圖： 

    這裏對js代碼作點說明： 基本參數是能夠隨意改動的。就在最上面的初始。css代碼和js代碼均可以很好的兼容。勇氣來也很方便。

    5、總結：

        這個例子能作到上面的全部需求，可是有一個問題就是： 當最後一張的時候它會又從新到第一張。若是你不喜歡這樣的話，那麼不要緊。我已經作出來了，一直向前不回到第一張的例子。下面會繼續寫出來的。（發現用這個寫博客真心很差寫啊，有些很差說。很簡單，可是又很關鍵的。不過應該思路你是明白了。值了！）

    效果演示： http://www.jiuni.com.cn/myworks/picture-loop/index.html

    （本篇完）