移动端轮播插件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 );  }