滑动事件以在触摸设备上导航幻灯片

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 容器添加向左滑动和向右滑动：

$('.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 滑动实现，但你可以在 Android 和 iOS 平台上测试它，它会给你感觉（jQM 滑动事件就是这样工作的）。这是 jQM 的实现：http://jsfiddle.net/Gajotres/qBbsX/