2013-08-03 45 views
-1

我有一個傳送帶,你可以在這裏找到:http://hutchcreative.co.uk/rod/。在移動設備上,用戶可以輕鬆瀏覽傳送帶上的圖像,而無需點擊傳送帶控件。我想刪除此功能,因此迫使用戶使用傳送帶控件。在jquery旋轉木馬中刪除觸摸屏刷卡

這裏是我的jQuery:

jQuery(document).ready(function($) { 

    var wind = $(window), 
     html = $("html"), 
     touch = html.hasClass("touch"), 
     ie8 = html.hasClass("ie8"), 
     ie = html.hasClass("ie"), 
     picks = $("#picks"), 
     li = picks.find("li"), 
     skip = picks.find(".skip"), 
     hold = true, 
     interval 

    li 
    .eq(0) 
    .addClass("current") 

    ph_picks_autocolor() 

    li 
    .imagesLoaded() 
    .progress(function(e, i) { 

     if (ie8) 
      return 

     $(i.img) 
     .parents("li") 
     .css("background-image", "url(" + i.img.src + ")")  

    }) 
    .always(function() { 

     picks.addClass("ready") 

     ph_picks_release() 

    }) 

    function ph_picks(side) { 

     if (hold) 
      return 

     hold = true, 
     current = li.filter(".current") 

     if (side == "next") { 
      next = current.next("li").length ? current.next("li") : li.eq(0)   
     } 
     else { 
      next = current.prev("li").length ? current.prev("li") : li.filter(":last") 
     } 

     current.removeClass("current") 

     next.addClass("current") 

     ph_picks_autocolor(next) 

     ph_picks_release() 

    } 

    function ph_picks_auto() { 

     if (interval) 
      clearInterval(interval) 

     interval = setInterval(function() { 

      ph_picks("next") 

     }, 10000) 

    } 

    function ph_picks_release() { 

     if (ie) { 

      hold = false 

      ph_picks_auto() 

     } 
     else { 

      setTimeout(function() { 

       hold = false 

       ph_picks_auto() 

      }, 800)  

     } 

    } 

    function ph_picks_autocolor(current) { 

     current = current ? current : li.filter(".current") 

     skip.css("border-color", current.children("article").css("color")) 

    } 

    wind.on("keydown", function(e) { 

     if (e.keyCode == 39 || e.keyCode == 37) { 

      ph_picks(e.keyCode == 39 ? "next" : "prev") 

      e.preventDefault() 

     } 

    }) 

    if (! touch) { 

     skip 
     .on("click", function(e) { 

      ph_picks("next") 

      e.preventDefault() 

     }) 

     skipLeft = picks.find("#skipLeft"), 
     skipRight = picks.find("#skipRight") 

     skipLeft 
     .hammer() 
     .on("tap", function(e) { 

      ph_picks("prev") 

      e.gesture.preventDefault() 

     }) 
     skipRight 
     .hammer() 
     .on("tap", function(e) { 

      ph_picks("next") 

      e.gesture.preventDefault() 

     }) 

    } 
    else { 

     picks 
     .hammer() 
     .on("dragstart", function(e) { 

      e.gesture.preventDefault() 

     }) 
     .on("dragend", function(e) { 

      var i = e.gesture 

      if (i.distance < 40) 
       return 

      if (i.direction == "left") { 
       ph_picks("next")    
      } 
      else if (i.direction == "right") { 
       ph_picks("prev") 
      } 

     }) 

     skipLeft = picks.find("#skipLeft"), 
     skipRight = picks.find("#skipRight") 

     skipLeft 
     .hammer() 
     .on("tap", function(e) { 

      ph_picks("prev") 

      e.gesture.preventDefault() 

     }) 
     skipRight 
     .hammer() 
     .on("tap", function(e) { 

      ph_picks("next") 

      e.gesture.preventDefault() 

     }) 

     /*skip 
     .hammer() 
     .on("tap", function(e) { 

      ph_picks("next") 

      e.gesture.preventDefault() 

     })*/ 

    } 

}); 
+1

地獄是的,刪除用戶友好,它會很酷! ... – MightyPork

+0

它的一個原因,它是一個完整的流血圖像,這意味着用戶不能向下滾動頁面,因爲jquery正在尋找手勢。所以它變得令人難以置信的非用戶友好。所以需要刪除。 – Megan

回答

1

我能想到的方法有兩種:

有一個透明<div>在轉盤上,和消費上的所有鼠標事件,所以旋轉木馬一無所獲。

您可以使用絕對定位來獲取div,並將clickevent.stopPropagation()綁定。

手動取消綁定轉盤事件與jQuery.off。這可能是swipeleftswiperight,或者只是mousedown


選項似乎少了很多艱鉅。