1

我在使用 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 方法的示例。所以也许我使用不正确？

4

1 回答 1

2

似乎自动滚动构造函数没有正确链接，因此没有返回您正在创建的可滚动的实例。

尝试稍微更改代码以在初始化后获取对 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();
    });

});
于 2013-01-15T12:54:38.800 回答