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

将swipeleft和swiperight添加到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/

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

1 个答案: