jQuery插件實踐之輪播練習（二）

全部文章搬運自個人我的主頁：sheilasun.me

上一篇中學習了jQuery插件的寫法，這篇該着手實現啦。首先明確一下輪播要具有哪些功能：

1. 能夠點擊「向後」按鈕向後翻頁
2. 能夠點擊「向前」按鈕向前翻頁
3. 要有個快速導航功能，點擊項能夠直接切換到某頁
4. 能夠自動播放，也能夠取消自動播放
5. 最好切換的效果也能夠設置

這些作好，一個簡單的輪播就實現了。下面說些寫代碼過程當中遇到的一些細節問題。

CSS 和 HTML

設置動做以前，先把結構和樣式完成，html主要分爲三個部分。第一個部分負責向前和向後翻頁的「按鈕」各一個，分佈在輪播圖的左右兩側。第二個部分是滾動的主體，是一個ul標籤。第三個部分，快速導航，也是一個ul標籤。這部分比較簡單，由以下代碼實現便可：

CSS

*{padding:0;margin:0;}
.clearfix{overflow: hidden;_zoom:1;}
.carousel-container{width: 500px;margin:30px auto;position: relative;}
.carousel-container li{float: left;list-style:none;}
.content-container{width: 500px;height: 250px;overflow: hidden;}
.carousel-container .content{position: absolute;}
.carousel-container .content img{width: 500px;height: 250px;}
.carousel-container .quick-nav a{display: block;width: 8px;height: 8px;border-radius: 50%;background-color: #e5e5e5;opacity: .5;margin: 4px 5px;}
.carousel-container .quick-nav a.active{background: rgba(0,0,0,.8);}
.carousel-container .quick-nav{position: absolute;right: 10px;bottom: 10px;background: rgba(0,0,0,.5);border-radius: 4px;}
.carousel-container .circle-button{display: block;width: 32px;height: 32px;border-radius: 50%;background: rgba(0,0,0,.5);line-height: 32px;text-align: center;}
.carousel-container .prev,.carousel-container .next{position: absolute;top:50%;margin-top: -16px;color: #fff;cursor: pointer;font-size: 15px;font-weight: bold;z-index: 100;}
.carousel-container .prev{left: 10px;}
.carousel-container .next{right: 10px;left: auto;}

html

<div class="carousel-container clearfix">
    <div><span class="circle-button prev"><</span><span class="circle-button next">></span></div>
    <div class="content-container">
        <ul class="content clearfix">
            <li data-index=0><a href="http://www.baidu.com"><img src="http://eimg.smzdm.com/201507/15/55a5b751922d57497.jpg" alt=""></a></li>
            <li data-index=1><a href="http://www.baidu.com"><img src="http://eimg.smzdm.com/201507/14/55a46c4f1ce3a8296.png" alt=""></a></li>
            <li data-index=2><a href="http://www.baidu.com"><img src="http://eimg.smzdm.com/201507/15/55a5b4bd1ddb69497.png" alt=""></a></li>
            <li data-index=3><a href="http://www.baidu.com"><img src="http://eimg.smzdm.com/201507/15/55a5c47c4a7c12930.png" alt=""></a></li>
            <li data-index=4><a href="http://www.baidu.com"><img src="http://eimg.smzdm.com/201507/15/55a5c33f188bf9070.png" alt=""></a></li>
        </ul>
    </div>
    <ul class="quick-nav clearfix">
        <li><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
        <li><a href="javascript:void(0)"></a></li>
    </ul>
</div>

樣式和結構都有了，下面是重點部分，如何實現本文開頭說的功能。

向後翻頁

一開始我想得比較簡單，以爲向後翻頁就不斷用animate方式改變滾動對象的left值，每次翻的時候判斷一下當前頁是否是已是最後一頁。

if true →left:0px （回到第一頁）
else →left-=itemWidth (即向前移一張圖片的寬度）
這樣作確實能夠勉強實現向後翻的功能，只是有個比較怪異的地方。從第一頁開始日後翻，都是圖片向左滑動，直到翻到了最後一頁，這時若是再向後翻，圖片則會向右滑動回到第一頁，就形成了滑動方向不一致的問題，效果比較奇怪。

所以我必須換一種方式，要讓圖片始終是向左滑動的，下面是一種解決方案。

1. 點擊「向後翻頁」。

2. 將包含各圖片的ul列表向左移一個圖片寬度，這個過程用動畫實現。

   $content.animate({left: itemWidth * (-1)},1000);

3. 這樣就實現了圖片向左滑動，可是爲了保證後續還能正常滑動，咱們將當前顯示的li節點永遠放在第一個，而且將ul列表的left重置回0.這個過程須要在動畫結束以後，而且要當即執行完，讓人的眼睛根本察覺不到這個切換的過程，因此放在上步中動畫的回調函數裏，自己再也不用動畫方式了。

   這樣，每次向後翻頁，重複執行第二步和第三步便可。將第二步中的代碼改爲：

   $content.animate({
   left: itemWidth * (-1)
   }, 1000, function() {
       $content.find('li').first().insertAfter($content.find('li').last());
   $content.css('left', 0);
   });

向前翻頁

向前翻頁的作法跟向後翻頁差很少，只是順序顛倒一下。按照前文所述作法，當前顯示的li節點永遠是ul列表中的第一個，爲了向前翻有圖片出來，必須先將最後的li節點調到最前面來，這時已經達到了顯示前一張的目的，可是卻沒有動畫效果，所以還須要作些小動做，營造出圖片是從前面滑出來的趕腳。

咱們能夠這樣作，在將li節點調到最前面以後當即將ul列表左移一個圖片寬度，這個過程不用動畫方式而是當即執行，這樣的效果就是看起來就是，點了向前翻頁以後，好像什麼也沒發生嘛，而事實上，立刻要顯示的圖片已經被調到ul列表最前面，在容器左側待命了。剩下的事情就簡單了，用動畫方式將ul列表的left重置到0就好了。核心代碼以下：

$content.find('li').first().before($content.find('li').last());
$content.css('left', $content.itemWidth * (-1));
$content.animate({left: 0}, 1000);

這樣向前翻頁和向後翻頁的功能就實現了， 至於點擊小圓點直接翻到某頁的問題能夠換成「計算出要翻到的頁數和當前頁數的差n，而後去實現n次向前翻或向後翻」便可。自動播放用定時器實現便可。

slide 效果

fade 效果

完整的插件代碼和使用方法能夠戳個人Github→jquery-carousel-plugin,若有錯誤或不當之處，歡迎你們指正！