2016-03-03 31 views
2

我正在嘗試使旋轉木馬和捕捉某些特定用戶對幻燈片移動的自定義事件的操作。在傳送帶上捕捉特定事件

  • 幻燈片恢復
  • 觸摸時移動

我試着用slick,但光滑的自定義事件觸發沒有如我所料。 這是我試過的代碼。

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi"> 
 
\t <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/> 
 
\t <link rel="stylesheet" type="text/css" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css"/> 
 
\t <style type="text/css"> 
 
\t \t .slider { 
 
\t \t \t width: auto; 
 
\t \t \t margin: 30px 50px 50px; } 
 
\t 
 
\t \t .slick-slide { 
 
\t \t \t background: #3a8999; 
 
\t \t \t color: white; 
 
\t \t \t padding: 40px 0; 
 
\t \t \t font-size: 30px; 
 
\t \t \t font-family: "Arial", "Helvetica"; 
 
\t \t \t text-align: center; } 
 
\t 
 
\t \t .slick-prev:before, .slick-next:before { 
 
\t \t \t color: black; } 
 
\t 
 
\t \t .slick-dots { 
 
\t \t \t bottom: -30px; } 
 
\t 
 
\t \t .slick-slide:nth-child(odd) { 
 
\t \t \t background: #e84a69; } 
 
\t 
 
\t </style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script> 
 
</head> 
 
<body> 
 

 
<section class="slider"> 
 
\t <div>slide1</div> 
 
\t <div>slide2</div> 
 
\t <div>slide3</div> 
 
\t <div>slide4</div> 
 
\t <div>slide5</div> 
 
\t <div>slide6</div> 
 
</section> 
 

 
<div id="log" style="height:300px;overflow-y:auto"></div> 
 

 
<script> 
 
\t $(".slider").slick({ 
 
\t \t autoplay: false, 
 
\t \t dots: true 
 
\t }).on("afterChange beforeChange edge init reInit setPosition swipe breakpoint", handler); 
 

 
\t function handler(event, slick, direction) { 
 
\t \t var $log = $("#log"); 
 
\t \t event.type == "beforeChange" && $log.html(""); 
 

 
\t \t $log.html(event.type +"<br>"+ $log.html()); 
 
\t } 
 
</script> 
 
</body> 
 
</html>

有沒有恢復活動

滑動時沒有達到touchThreshold條件,幻燈片要回的最後一個位置,但事件如下順序打響。

beforeChange -> afterChange -> setPosition 

而對於正常滑動移動,事件被觸發,如:

beforeChange -> swipe -> afterChange -> setPosition 

唯一的區別是 '滑動'。爲了區分正常移動和恢復移動,我需要從中找出差異,這是一件乏味的工作。

有沒有辦法趕上用戶的觸摸在那個點上移

當用戶移動觸摸滑動時,there's no custom events firing 。 事件觸發後立即觸發。

我的問題是什麼是基於jQuery的輪播插件推薦哪些符合上述條件?

回答

0

其中一個替代方案是基於jQuery的輕彈組件egjs。 您可以在http://naver.github.io/egjs/demo/flicking/

這裏看看基本的演示是示例工作演示代碼:

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi"> 
 
\t <style type="text/css"> 
 
\t \t .slider{height:130px;background-color:grey} 
 
\t \t .eg-flick-panel {font-size:2em;text-align:center} 
 
\t </style> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/egjs/1.1.0/pkgd/flicking.pkgd.min.js"></script> 
 
</head> 
 
<body> 
 

 
<section class="slider"> 
 
\t <div id="item1" style="background-color:#CC66CC"> 
 
\t \t <p>slide1</p> 
 
\t </div> 
 
\t <div id="item2" style="background-color:#66cccc"> 
 
\t \t <p>slide2</p> 
 
\t </div> 
 
\t <div id="item3" style="background-color:#ffc000"> 
 
\t \t <p>slide3</p> 
 
\t </div> 
 
\t <div id="item3" style="background-color:#f5871f"> 
 
\t \t <p>slide4</p> 
 
\t </div> 
 
\t <div id="item3" style="background-color:#66ff66"> 
 
\t \t <p>slide5</p> 
 
\t </div> 
 
\t <div id="item3" style="background-color:#8a6d3b"> 
 
\t \t <p>slide6</p> 
 
\t </div> 
 
</section> 
 

 
<div id="log" style="height:300px;overflow-y:auto"></div> 
 

 
<script> 
 
\t new eg.Flicking(".slider", { 
 
\t \t duration: 300, 
 
\t \t circular: true 
 
\t }).on({ 
 
\t \t beforeFlickStart: handler, 
 
\t \t flick: handler, 
 
\t \t flickEnd: handler, 
 
\t \t beforeRestore: handler, 
 
\t \t restore: handler 
 
\t }); 
 

 
\t function handler(event) { 
 
\t \t var $log = $("#log"), direction = { "2": "&larr;", "4": "&rarr;" }; 
 

 
\t \t /^before/.test(event.eventType) && $log.html(""); 
 
\t \t $log.html(event.eventType +": "+ direction[event.direction] +"<br>"+ $log.html()); 
 
\t } 
 
</script> 
 
</body> 
 
</html>

還原事件

當你注意到運行上面的代碼,當滑動ISN沒有移動通過閾值恢復事件按以下順序觸發:

beforeRestore -> flick ... flick -> restore 

移動觸摸屏

,並在觸摸屏的移動,多個flick事件被觸發多達你的動作,你也可以用確定的事件參數值的移動方向。

的事件順序觸發:

(during the touch down moves) flick ... flick -> (when touch is up) beforeFlickStart -> flick ... flick -> flickEnd 

希望這個問題的答案。