我创建了一个简单的滑块。我也希望它也适用于智能手机而不仅仅适用于台式机。因此,在这种情况下,当您从左到右或从右到左移动手指时,应该可以让它滑动。目前只有当你点击按钮时它才有效。
我不知道如何开始。我怎么能这样做?
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:它应该在不使用插件的情况下工作。
答案 0 :(得分: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();
}