优化点:
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 );
}