如何向图片库添加滑动功能？

Question

我有一个图片库，我想向其中添加滑动功能，下一个和上一个大图片。 我不想使用任何插件。 我有一些代码，我尝试了一些，但是无法使其正常工作。 任何建议都将受到高度赞赏。

$(document).on("pagecreate","#pageone",function(){
 $("img").on("swipeleft",function(){
    console.log("Left");
  }); 

 $("img").on("swiperight",function(){
    console.log("Right");
  });                          

}）;

杰斯菲德尔

谢谢！

Answer 1

swipeleft事件侦听器不适用于仅jQuery。 您可以使用jQuery Mobile，也可以使用touchstart ， touchmove和touchend自己touchend 。 假设您只想执行一次，则以下代码应该执行：

var swiping = false;

$('#div').on('touchmove', function (event) {
  swiping = true;
})


$('#div').on('touchstart', function (event) {
  setTimeout(function() {
    if ( swiping = true ) {
      console.log('swiping');
    }
  }, 50)
})

由于touchmove与touchstart同时启动，因此setTimeout可能不是必需的-但我将其保留在此处，以防任何给定的浏览器执行不同的操作。