jQuery Mobile学习笔记02——jQuery Mobile实现监听左右滑动变换图片

<--------------------------------------------------------------->

1.效果展示

通过在图片上左右滑动达到切换图片的效果。

 


2.代码

这里我们要借用jQuery Mobile来实现这一功能，因为jQuery中没有自带检测左右滑动这一功能。

将下面这段代码直接放入$(document).ready(function(){ });中，即可监听在“#clothimg”上的左右滑动事件。

 


3.注意：

（1）当然需要引入jQuery Mobile相关文件。

 


（2）另外在实现改变图片时，要注意指定的图片地址方法，此处因为我将js代码独立于html之外，如果还是使用带
__ROOT__（ThinkPHP框架）去指定图片地址，则图片将不会加载成功。



4.拓展：

jQuery Mobile还有很多其他相关触控事件：

（1）tap
事件在用户敲击某个元素时触发

 


（2）taphold
事件在用户敲击某个元素并保持一秒时被触发

 


（3）swipe
事件在用户在某个元素上水平滑动超过 30px
时被触发

 


<--------------------------------------------------------------->