jQuery 轮播之 Clone篇

2016-04-28  本文已影响397人  大淀桑浮不起來

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

上一篇下一篇

猜你喜欢

热点阅读