slides 带手势的图片滑动效果(用于移动终端)

时间:2022-04-09 19:18:54

slidesjs 是基于jQuery开发的一款功能强大,是简单的幻灯片插件,但是需要要应用于移动终端的话,还需要考虑手势滑动时候图片切换功能。

  此次,我就在slidesjs基础上扩展了两个swipe属性"swiperight","swipeleft"。

[html] view plaincopy
  1. // swipe right
  2. if (option.swiperight)
  3. {
  4. control.bind('swiperight',function(){
  5. if (option.play) {
  6. pause();
  7. }
  8. animate('prev', effect);
  9. });
  10. }
  11. // swipe left
  12. if (option.swipeleft)
  13. {
  14. control.bind('swipeleft',function(){
  15. if (option.play) {
  16. pause();
  17. }
  18. animate('next', effect);
  19. });
  20. }

这样在用slidesjs时候,只需要设置两个属性为“true”,如下:

[html] view plaincopy
  1. $(document).ready((function(){
  2. $('#slides').slides({
  3. preload: true,
  4. preloadImage: 'images/loading.gif',
  5. play: 3000,
  6. pause: 1000,
  7. hoverPause: true,
  8. swiperight:true,
  9. swipeleft:true
  10. });
  11. }));

这样,WEB端网页用移动终端访问,图片滚动也能支持手势了。

代码下载:http://dl.vmall.com/c0bvwjdbyk