帶觸摸功能的滑塊

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文檔。這一切都在香草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(); 
}