做有态度的前端团队

网易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转换

已有 48 条评论

  1. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  2. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  3. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  4. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  5. 1

    1

  6. 1

    1

  7. 1

    1

  8. 1

    1

  9. 1

    1

  10. 1

    1

  11. 1

    1

  12. 1

    1

  13. 1

    1

  14. 1

    1

  15. 1

    1

  16. 1

    1

  17. 1

    1

  18. 1

    1

  19. 1

    1

  20. 1

    1

  21. 1

    1

  22. 1

    1

  23. 1

    1

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif