slide轮播 v1.0

作者: 吱吱桑日期: 2016-09-23

144125

重写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上阅读比较好 _(:з」∠)_