0

ユーザーが [次へ] または [前へ] ボタンをクリックしてナビゲートできるスライドショーを表示しています。以下に示すように、クリック時に次または前の画像を img src にロードしています。

タッチ デバイスでも互換性を維持しようとしており、スワイプで 1 つの写真から次の写真に移動できるようにしたいと考えています。スライドショーのナビゲーションを処理するために通常のスワイプ イベントを実装する際の私の懸念は、滑らかな感触がなく、スワイプ イベントがトリガーされると、少しラグが発生し、次の画像が読み込まれるかのようになることです。ユーザーが次または前の矢印をクリックしただけです。

私が達成しようとしているのは、フォト アルバムをトラバースするときに多くのタブレットやスマートフォンが持つ滑らかな感触です。

これを達成するために何か助けていただければ幸いです。

よろしくお願いします

マイ 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>
4

1 に答える 1

2

左スワイプと右スワイプを 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 実装があります: http://jsfiddle.net/Gajotres/qBbsX/

于 2013-01-17T19:00:44.330 に答える