移动端轮播插件Swipe.js 2.0 优化

优化点:

1.手动循环拖动

2.触摸后依旧自动播放

插件本身不支持手动话滑动的循环播放

可以在插件js源代码中找到代码

 var events={}中关于end:事件的处理，如下代码:

end: function(event) {

      // measure duration
      var duration = +new Date - start.time;

      // determine if slide attempt triggers next/prev slide
      var isValidSlide =
            Number(duration) < 250               // if slide duration is less than 250ms
            && Math.abs(delta.x) > 20            // and if slide amt is greater than 20px
            || Math.abs(delta.x) > width/2;      // or if slide amt is greater than half the width

      // determine if slide attempt is past start and end
      var isPastBounds =
            !index && delta.x > 0                            // if first slide and slide amt is greater than 0
            || index == slides.length - 1 && delta.x < 0;    // or if last slide and slide amt is less than 0
     
      // determine direction of swipe (true:right, false:left)
      var direction = delta.x < 0;

      // if not scrolling vertically
      if (!isScrolling) {

        if (isValidSlide && !isPastBounds) {

          if (direction) {

            move(index-1, -width, 0);
            move(index, slidePos[index]-width, speed);
            move(index+1, slidePos[index+1]-width, speed);
            index += 1;

          } else {

            move(index+1, width, 0);
            move(index, slidePos[index]+width, speed);
            move(index-1, slidePos[index-1]+width, speed);
            index += -1;

          }

          options.callback && options.callback(index, slides[index]);

        } else {
         //触摸滑动时实现循环播放
          if(isPastBounds){
              if (index == 0) {
                slide(slides.length - 1);
              } else {
                slide(0);
              }
          }else{
              move(index-1, -width, speed);
              move(index, 0, speed);
              move(index+1, width, speed);
          }
        }

      }

      // kill touchmove and touchend event listeners until touchstart called again
      element.removeEventListener('touchmove', events, false)
      element.removeEventListener('touchend', events, false)

    },

注意else 分支中的代码注释，新增的代码实现了手动滑动循环播放的效果

如果想要实现手动滑动后，继续自动播放，那么修改stop()函数  如下:

function stop() {

    //delay = 0;
    delay = options.auto > 0 ? options.auto : 0;
    clearTimeout(interval );

  }