做有态度的前端团队

网易FEG前端团队

slide轮播 v1.0

重写slide插件,一个艰巨的任务,就这样在展开了。

目前只实现了简单的左右切换和渐隐渐现的切换效果,戳http://test.nie.163.com/test_html/test/test/slide/demo.html

而且功能还在测试中,后续会继续完善。

这里简单说一下前后循环的实现效果,就是当切换到最后一张时,如何继续自然地切换到第一张。

QQ截图20160929155354.png

参考目前优秀的swiper插件,发现它实现得挺聪明的。它是在第一张和最后一张分别插入临近的tab页,然后再进行下一张切换的时候,快速切换到相邻的tab页,然后再完美实现过渡效果。

下面画个图展示一下具体步骤:

QQ截图20160929160202.png

QQ截图20160929160420.png

QQ截图20160929160735.png

同理,上一个切换也是如此实现。

知道原理之后,就开始用代码来实现了。

本插件有点特殊,支持translate的就用translate来实现过渡效果,不支持的就通过改变left来实现...

   ...
   //片段代码
   //s为整个slide的container,即上面demo的news-box
   nextSlide: function(s){

        var distance = -s.activeIndex * this.size;  //activeIndex当前的tab, size表示每次移动的距离
        
        if(s.params.loop){

                        //处理特殊的tab
            if(!s.support.transform && s.activeIndex==1 && this.loop_pos==-(this.loop_slides.length-1)){
                this.loop_pos = -1;   //快速跳到对应临近tab的位置
                distance = this.loop_pos * this.size; 
                this.quicklyChange2(s, distance);
            }

            this.loop_pos--;
            distance = this.loop_pos * this.size;
        }

        this.slideTo(s, s.activeIndex, true); //过渡效果

    },
        
    prevSlide: function(s){

        var distance = -s.activeIndex * this.size; 
        if(s.params.loop){

            if(!s.support.transform && s.activeIndex==s.slides.length-2 && this.loop_pos == 0){
                this.loop_pos = -(this.loop_slides.length-2);
                distance = this.loop_pos * this.size;
                this.quicklyChange2(s, distance);
            }
            
            this.loop_pos++;
            distance = this.loop_pos * this.size;
        }

        this.slideTo(s, s.activeIndex, true);
        
    }
   ...
   //代码过于零碎,墙裂建议去git上阅读比较好 _(:з」∠)_

最后,祝大家节日快乐~!我要同祖国母亲庆生了。

手机阅读请扫描下方二维码:

none
上一篇:关于position:sticky的使用   下一篇:CSS3的3D转换