所有文章搬運自我的個人主頁：sheilasun.me

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

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

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

CSS 和 HTML

設置動作之前，先把結構和樣式完成，html主要分為三個部分。第一個部分負責向前和向后翻頁的“按鈕”各一個，分布在輪播圖的左右兩側。第二個部分是滾動的主體，是一個ul標簽。第三個部分，快速導航，也是一個ul標簽。這部分比較簡單，由如下代碼實現即可：

*{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,如有錯誤或不當之處，歡迎大家指正！