上次写的文章《手机触屏触摸特效javascript-TouchSwipe（依赖于jqurey库）中文说明》这个插件比较坑，笔者研究了一天后没想到这款插件竟然是不支持a标记的，太坑了，无奈之下，又找了一个比较轻量级的插件，也很简单，功能也很实用大小仅仅只有1.2K。。
这款插件的事件比上一篇文章的插件少的多的多，只有简单的上下左右滑动，但是基本上也就是这几个特效，而且插件非常小，非常适合做网站。
下面是官方demo：

$(“#imagegallery”).touchwipe({ wipeLeft:function(){alert(“left”);}, wipeRight:function(){alert(“right”);}, wipeUp:function(){alert(“up”);}, wipeDown:function(){alert(“down”);}, min_move_x:20, min_move_y:20, preventDefaultEvents:true });

怎么样，很简单吧：
wipeLeft：向左滑动
wipeRight：向右滑动
wipeUp：测试了以下。。貌似是从上往下滑动。。 我手机的问题么。
wipeDown：这个貌似从下往上滑动。如果有人不一样的话，回复以下。
min_move_x：最小滑动X轴距离。
min_move_y：最小滑动y轴距离。
preventDefaultEvents:preventDefault 被设为 true 时，滑动手势的默认事件（例如页面滚动）会被屏蔽，只执行 wipeLeft: … wipeRight: … 所限定的内容。 （感谢评论者Renfei Song的补充）

下面是我写的一个简单的例子：

<script type=”text/javascript” src=””></script> <script type=”text/javascript” src=””></script> <script type=”text/javascript”> var MyMar = setInterval(Marquee, 3000); var pic_width = 320 a = 0 function Marquee(){ a++ if(a>2){a=0} $(".focus_pic .kd").css("-webkit-transform","translateX(-"+a*pic_width+"px)") } $(".focus_pic .kd").touchwipe( { wipeLeft:function(){ if(a>1){ return(false)}else { $(".focus_pic .kd").css("-webkit-transform","translateX(-"+(a+1)*pic_width+"px)"); a=a+1 }}, wipeRight:function(){ if(a<0){ return(false)}else{ $(".focus_pic .kd").css("-webkit-transform","translateX(-"+(a-1)*pic_width+"px)"); a=a-1 } }, min_move_x: 20, min_move_y: 20, preventDefaultEvents: true }); </script> <div class=”focus_pic”> <div class=”kd”> <a href=”#”><img src=”” alt=”" /></a> <a href=”#”><img src=”–logo.jpg” alt=”" /></a> <a href=”#”><img src=”–logo(1).jpg” alt=”" /></a> </div> </div>

官方下载网址：