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检查器中没有控制台错误。

任何想法都会很棒，我发现在如何使用这些API方法的示例中缺少jQuery工具文档。所以也许我错误地使用它们了？

Answer 1

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

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

});

Jquery Tools可滚动自动滚动而不是暂停

1 个答案: