滑動事件以在觸摸設備上導航幻燈片

我在幻燈片上顯示用戶可以通過單擊下一個或前一個按鈕進行導航。點擊時，我將下一個或prev圖像加載到img src中，如下所示。滑動事件以在觸摸設備上導航幻燈片

我想保持觸摸設備上的兼容性，並希望啓用滑動從一張照片導航到下一張照片。我對執行正常的滑動事件來處理幻燈片導航感到擔心的是，它不會有流暢的感覺，並且當滑動事件被觸發時，會有一點滯後，下一個圖像將被加載，就好像用戶只需點擊下一個或prev箭頭。

我想要完成的是流體感受到許多平板電腦/智能手機在遍歷相冊時的感覺。

我倒是真正體會到完成這個任何幫助，

提前感謝

我的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>

來源

2013-01-17 AnchovyLegend

一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/

來源

2013-01-17 19:00:44 Gajotres

感謝您的答覆。出於好奇，你爲什麼使用on（）而不是swipeleft（function（）{}）;？ – AnchovyLegend

@MHZ'swipeleft（...）'是'on（「swipeleft」，...）'的快捷方式，所以後者的執行速度稍快。 – Jasper

滑動事件以在觸摸設備上導航幻燈片

回答

相關問題