jQuery插件实践之轮播练习（二）

所有文章搬运自我的个人主页：sheilasun.me

上一篇中学习了jQuery插件的写法，这篇该着手实现啦。首先明确一下轮播要具备哪些功能：

1. 可以点击“向后”按钮向后翻页
2. 可以点击“向前”按钮向前翻页
3. 要有个快速导航功能，点击项可以直接切换到某页
4. 可以自动播放，也可以取消自动播放
5. 最好切换的效果也可以设置

这些做好，一个简单的轮播就实现了。下面说些写代码过程中遇到的一些细节问题。

CSS 和 HTML

设置动作之前，先把结构和样式完成，html主要分为三个部分。第一个部分负责向前和向后翻页的“按钮”各一个，分布在轮播图的左右两侧。第二个部分是滚动的主体，是一个ul标签。第三个部分，快速导航，也是一个ul标签。这部分比较简单，由如下代码实现即可：

![此处输入图片的描述][1] **CSS**

*{padding:0;margin:0;}
.clearfix{overflow: hidden;_zoom:1;}
.carousel-container{ 500px;margin:30px auto;position: relative;}
.carousel-container li{float: left;list-style:none;}
.content-container{ 500px;height: 250px;overflow: hidden;}
.carousel-container .content{position: absolute;}
.carousel-container .content img{ 500px;height: 250px;}
.carousel-container .quick-nav a{display: block; 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; 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 (即向前移一张图片的宽度）
这样做确实可以勉强实现向后翻的功能，只是有个比较怪异的地方。从第一页开始往后翻，都是图片向左滑动，直到翻到了最后一页，这时如果再向后翻，图片则会向右滑动回到第一页，就造成了滑动方向不一致的问题，效果比较奇怪。

![此处输入图片的描述][2] 因此我必须换一种方式，要让图片始终是向左滑动的，下面是一种解决方案。

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 效果

![此处输入图片的描述][3]

fade 效果

![此处输入图片的描述][4]

完整的插件代码和使用方法可以戳我的Github→jquery-carousel-plugin,如有错误或不当之处，欢迎大家指正！