今天学了一下jQuery制作stickup特效，感觉很不错，虽然网上也有一堆插件，不过还是如同原来说的，还是要自己写一下，知道了原理并且有哪些注意点，还是比直接拿过来好，OK，进入上次说好的 另一种轮播方法：头尾Clone篇
顾名思义，头尾Clone篇，就是DOM上不再是原来的N个图，而是N+2，因为上一个DOM搬运篇，怎么说呢？大规模的搬运DOM，还是比较消耗性能的；
先上原理图：
Clone 轮播原理.png
原理是在开头和结尾clone两个临界墙壁，只要撞到这两个墙壁，就会在animate移动图片队列之后，用jquery.css跳动到正体0和3身上，实现将轮播限制在这个空间里面，看看效果图,
![运行图]](https://img.haomeiwen.com/i1746966/89202bc44e35a8bd.gif?imageMogr2/auto-orient/strip)
和上次一样去掉镜头的overflow：hidden看看到底是在怎么运行：
运行原理
好的，现在开始讲一下具体的实现套路：
Step0.HTML的结构
<div class="wrap">
<ul class="ct clearfix">
<li><img src="img/fujisan.png"></li>
<li><img src="img/moe.png"></li>
<li><img src="img/kyoto.jpg"></li>
<li><img src="img/sushi.png"></li>
</ul>
<a class="arrow pre" href="#"><</a>
<a class="arrow next" href="#">></a>
<ul class="bullet clearfix">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Step1.JS的声明
var $ct = $('.ct'),
$pre = $('.pre'),
$next = $('.next'),
$items = $ct.children(),
$bullet = $('.bullet'),
imgWidth = $items.width(),
imgCount = $ct.children().length;
$ct.prepend($items.last().clone());
$ct.append($items.first().clone());
var imgTrueCount = $ct.children().length;
$ct.css({
left:0-imgWidth,
width:imgTrueCount * imgWidth
//这里不设置图片队列的宽度，图片就竖起来了
});
看看这里的的clone，还有两次获取img的数量；
Setp2： 点击上一个如何解决？
function playPre(idx){
var idx = idx || 1;
if(!isAnimate){
isAnimate = true;
setBg(curIdx);
//这里不需要减是因为clone之后,最前面多了一个,抵消了
$ct.animate({left: '+='+(imgWidth*idx)},function(){
curIdx = (imgCount + curIdx - idx)%imgCount;
if(curIdx === (imgCount - 1)){
$ct.css({left: 0-imgWidth * imgCount});
//这里的css操作也是一堵回归墙壁,回到非克隆本体的位置
}
isAnimate = false;
setBullet();
});
}
}
我这里为了不让nowIdx不成为负值，加上了imgCount，这里的取余和上一个例子一样，都是控制nowIdx不至于变得太大，和图片一样，始终在这个区间内变化；
Setp3： 点击下一个如何解决？
function playNext(idx){
var idx = idx || 1;
if(!isAnimate){
isAnimate = true;
setBg(curIdx+2);
//因为clone之后,都会加1
$ct.animate({left: '-='+(imgWidth*idx)},function(){
curIdx = (curIdx + idx)%imgCount;
if(curIdx === 0){
$ct.css({left: 0-imgWidth});
}
//和上个DOM的移动不一样的是,这里的css处理是为了让图片队列在到达最后一个clone元素时
//瞬间'归零',回到非克隆的本体位置,相当于归零墙壁
isAnimate = false;
setBullet();
});
}
}
当然你都看到了isAnimate这个状态锁，防止过度重复点击这一个很好，听说在监听鼠标滑动上，setTimeout()也有奇效？
Setp4： 核心问题都解决了，后面的和DOM搬运篇都是大同小异的
网友评论