javascript - 带触摸功能的 slider

Question

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

我不知道如何开始。我怎样才能做到这一点？

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

我更新了你的 fiddle :https://jsfiddle.net/6t1wx95f/13/

在 Chrome 中测试(在响应式 View 中使触摸事件正常工作)。归功于此answer 。

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

请参阅touch events文档。这一切都是用普通的 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();
}