jQuery的工具滾動自動滾屏不暫停

Question

我有jQuery的工具滾動插件的問題： http://jquerytools.org/documentation/scrollable/index.html

而且採用滾動自動滾動插件： http://jquerytools.org/documentation/scrollable/autoscroll.html

我想，當一個鏈接到暫停播放幻燈片被點擊，這是我的HTML標記：

<a id="pauseSlideshow" href="javascript:;">Pause Slideshow</a> 

這裏是我的javascript：

<script type="text/javascript"> 

    var scrollableApi; 

    $(document).ready(function() { 

     // Initialize the slideshow 
     scrollableApi = $('#slideshow') 
      .scrollable({ items: '.scrollable > .items', circular: true, mousewheel: false, speed: 1000 }) 
      .navigator({ navi: "#slideshow > .scrollable-nav", naviItem: "a", activeClass: "current" }) 
      .autoscroll({ interval: 3000, autopause: true, api: true }); 

     // Pause the slideshow when the link is clicked 
     $("#pauseSlideshow").click(function() { 
      alert("should pause slideshow"); 
      scrollableApi.pause(); 
      alert("no error"); 
     }); 

    }); 
</script> 

我看到兩個警報都顯示，但幻燈片仍然是自動滾動。 Chrome檢查器中沒有控制檯錯誤。

任何想法都會很棒，我發現jQuery工具文檔缺乏如何使用這些API方法的示例。所以也許我錯誤地使用了它們？

Answer 1

看起來像自動滾動構造函數沒有正確鏈接，所以沒有返回你正在創建的滾動實例。

試着稍微改變你的代碼才能到API的參考，它已經初始化之後：

var scrollableApi; 

$(document).ready(function() { 

    // Initialize the slideshow 
    $('#slideshow') 
     .scrollable({ items: '.scrollable > .items', circular: true, mousewheel: false, speed: 1000 }) 
     .navigator({ navi: "#slideshow > .scrollable-nav", naviItem: "a", activeClass: "current" }) 
     .autoscroll({ interval: 1000, autopause: true, api: true }); 

    // get a reference to the API 
    scrollableApi = $('#slideshow').data('scrollable'); 

    // Pause the slideshow when the link is clicked 
    $("#pauseSlideshow").click(function() { 
     scrollableApi.pause(); 
    }); 

});