Question

我创建了一个简单的滑块。我也希望它也适用于智能手机而不仅仅适用于台式机。因此，在这种情况下，当您从左到右或从右到左移动手指时，应该可以让它滑动。目前只有当你点击按钮时它才有效。

我不知道如何开始。我怎么能这样做？

var i = 0;
$('.next').bind('click', function() {           
  if (i < 4) {      
        $('li').animate({'left': '-=600px'}, 300).delay(600);  
    i++;
  }
  console.log($('li:first').position().left);
  console.log(i);
});

$('.back').bind('click', function() {
    if (i > 0) {
    if ($('li:first').position().left < 0) {    
      $('li').animate({'left': '+=600px'}, 300).delay(600);
      i--;
    }
  }
  console.log(i);
});

https://jsfiddle.net/6t1wx95f/11/

PS：它应该在不使用插件的情况下工作。

Answer 1

我更新了你的小提琴：https://jsfiddle.net/6t1wx95f/13/

在Chrome中测试（在响应式视图中使触摸事件有效）。归功于此answer。

基本上，您只需要使用touchstart和touchmove个事件。当您触摸移动时，只需将X位置与触摸开始时的位置进行比较即可。

请参阅touch events文档。它全部使用vanilla javascript，因此您不必包含任何插件。

// Set up events
var slider = document.getElementsByClassName('slider')[0];
slider.addEventListener('touchstart', handleTouchStart, false);        
slider.addEventListener('touchmove', handleTouchMove, false);

..和

if ( xDiff > 0 ) {
    /* left swipe */ 
    slideRight();
} else {
    /* right swipe */
    slideLeft();
}

带滑动功能的滑块

1 个答案: