slidesjs 是基于jQuery开发的一款功能强大,是简单的幻灯片插件,但是需要要应用于移动终端的话,还需要考虑手势滑动时候图片切换功能。
此次,我就在slidesjs基础上扩展了两个swipe属性"swiperight","swipeleft"。
// swipe right
if (option.swiperight)
{
control.bind('swiperight',function(){
if (option.play) {
pause();
}
animate('prev', effect);
});
}
// swipe left
if (option.swipeleft)
{
control.bind('swipeleft',function(){
if (option.play) {
pause();
}
animate('next', effect);
});
}
这样在用slidesjs时候,只需要设置两个属性为“true”,如下:
$(document).ready((function(){
$('#slides').slides({
preload: true,
preloadImage: 'images/loading.gif',
play: 3000,
pause: 1000,
hoverPause: true,
swiperight:true,
swipeleft:true
});
}));
这样,WEB端网页用移动终端访问,图片滚动也能支持手势了。