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{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 (即向前移一张图片的宽度)
这样做确实可以勉强实现向后翻的功能,只是有个比较怪异的地方。从第一页开始往后翻,都是图片向左滑动,直到翻到了最后一页,这时如果再向后翻,图片则会向右滑动回到第一页,就造成了滑动方向不一致的问题,效果比较奇怪。

![此处输入图片的描述][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,如有错误或不当之处,欢迎大家指正!

posted @ 2015-08-21 09:39  SheilaSun  阅读(387)  评论(0编辑  收藏