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,若有错误或不当之处，欢迎你们指正！