jQuery 轮播之 Clone篇

今天学了一下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搬运篇都是大同小异的