javascript - 滑动事件可在触摸设备上导航幻灯片

Question

我正在播放幻灯片，用户可以通过单击“下一个”或“上一个”按钮进行导航。单击时，我会将下一张或上一张图像加载到 img src 中，如下所示。

我也在尝试保持触摸设备上的兼容性，并且希望能够通过滑动从一张照片导航到下一张照片。我对实现正常的滑动事件来处理幻灯片导航的担忧是，它不会有流畅的感觉，并且当触发滑动事件时，会有一点滞后，并且会加载下一个图像，就好像用户只需单击下一个或上一个箭头。

我想要实现的是许多平板电脑/智能手机在浏览相册时所具有的流畅感。

我非常感谢任何帮助完成此任务，

提前非常感谢

我的 JavaScript

    var index=0;

    $('.catalog-img-container').attr("src", img_array[index]);
    $('#dialog').jqm();
    $(".next").click(function(){
        $('.catalog-img-container').attr("src", img_array[++index%arrayLength]);
    });         
    $(".previous").click(function(){
        if (--index < 0) index = arrayLength - 1;
        $('.catalog-img-container').attr("src", img_array[index%arrayLength]);
    });         

我的标记

        <div  class="catalogFrame">
            <img class="catalog-img-container" src="">
        </div>

Answer 1

向您的 img 容器添加 swipeleft 和 swiperright:

$('.catalog-img-container').on('.catalog-img-container', 'swipeleft', function () {
    //next img
    $('.catalog-img-container').attr("src", img_array[++index%arrayLength]);
}).on('.catalog-img-container', 'swiperight', function () {
    //prev img
    if (--index < 0) index = arrayLength - 1;
    $('.catalog-img-container').attr("src", img_array[index%arrayLength]);
});

如果您想获得更自然的感觉，请更改这些配置选项，以便滑动事件可以迟早触发:

$(document).bind("mobileinit", function(){
    $.event.special.swipe.horizontalDistanceThreshold = 30; //(default: 30px) – Swipe horizontal displacement must be more than this.
    $.event.special.swipe.verticalDistanceThreshold = 75; //(default: 75px) – Swipe vertical displacement must be less than this.
});

有关此内容的更多信息可以在这里找到:http://jquerymobile.com/test/docs/api/events.html

基本上就是这样，滑动事件在手机上几乎是流畅的(我有一个轮播 jQuery 移动实现，它工作得很好)，所以我认为你不会遇到太多问题。

这也是我的滑动事件示例:http://jsfiddle.net/Gajotres/Np3G4/它没有使用jQM swipe实现，但你可以在Android和iOS平台上测试它，它会给你感觉(jQM swipe事件就像那样工作)。这是 jQM 实现:http://jsfiddle.net/Gajotres/qBbsX/