jquery实现相册一下滑动两次的方法

本文将以实例形式详细阐述如何使用jQuery实现相册滑动两次的效果，这是一个非常实用的图片特效技巧。如果你对此感兴趣，那么请继续阅读。

我们需要一个全局变量来记录第一次触摸的时间，代码如下：

```javascript

var t1 = null; // 初始化为全局变量

```

接着，在body元素上绑定一个touchstart事件监听器，用于监听相册滑动事件。在滑动开始时记录当前时间t1：

```javascript

$('body').on('touchstart', 'gallerySlider img', function(e){

var touch = e.originalEvent,

startX = touch.changedTouches[0].pageX;

if (t1 == null){

t1 = new Date().getTime(); // 记录第一次触摸时间

}

//...后续代码省略

});

```

在touchstart事件内部，我们还需判断如果两次触摸时间间隔过短，则不进行任何操作。只有当两次触摸时间间隔较长时，才执行相应的操作。这部分代码如下：

```javascript

if (t2 - t1 < 500){ // 如果两次触摸时间间隔小于500毫秒，则不执行操作

t1 = t2;

return;

} else {

t1 = t2; // 更新第一次触摸时间为当前时间

}

```

接下来，在滑动过程中监听touchmove事件。根据滑动的方向，调用不同的函数来展示上一张或下一张图片。这部分代码如下：

```javascript

slider.on('touchmove', function(e){

var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];

if(touch.pageX - startX > 10){ // 向左滑动，展示上一张图片

slider.off('touchmove'); // 解除事件绑定，防止重复触发

showPrevious();

} else if (touch.pageX - startX < -10){ // 向右滑动，展示下一张图片

slider.off('touchmove'); // 解除事件绑定，防止重复触发

showNext();

}

});

```

在touchend事件发生时解除对touchmove事件的监听：

```javascript

}).on('touchend',function(){

slider.off('touchmove'); // 解除对touchmove事件的监听

});

```

这个技巧的实现原理是通过监听触摸事件来判断滑动的方向和速度。当滑动速度较快时，会触发相应的操作来展示上一张或下一张图片。希望本文所述对大家的jQuery程序设计有所帮助。另外提醒一下，上述代码中用到了Cambrian的渲染函数`cambrian.render('body')`，这个函数的具体实现不在本文讨论范围内。