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(); 
    }); 

});