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

浏览数：23 / 时间：2015年06月11日

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.   
  12. // swipe left   
  13. if (option.swipeleft)  
  14. {  
  15.     control.bind(‘swipeleft‘,function(){  
  16.         if (option.play) {  
  17.             pause();  
  18.         }  
  19.         animate(‘next‘, effect);  
  20.     });  
  21. }  

 

这样在用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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢