Question

我正在使用可导航的jquery UI工具。我希望它能自动自动播放，这很好，但是每当我与导航器交互时，时间都会变得很时髦。

我希望它在我点击任何导航链接时停止。我似乎无法滚动停止！

以下是启动它的代码：

HTML：

    <div id="flowpanes"> 
        <div class="items">
            <div>
                <h1>Content 1</h1>
            </div>
            <div>
                <h2>Content 2</h2>
            </div>
            <div>
                <h2>Content 3</h2>
            </div>
            <div>
                <h2>Content 4</h2>
            </div>
        </div>
    </div>
    <ul id="flowtabs" class="navi">
        <li><a href="#one" class="current"></a></li>
        <li><a href="#two"></a></li>
        <li><a href="#three"></a></li>
        <li><a href="#four"></a></li>
    </ul>

激活它的Jquery：

$(document).ready(function() {
    $("#flowpanes").scrollable({ circular: true, mousewheel: true }).autoscroll({autoplay: true,interval: 5000,steps: 1}).navigator({
        navi: ".navi",
        naviItem: 'a',
        activeClass: 'current',
        history: false,
    })
});

我尝试了这个，但它不起作用：

$(".navi a").click (function(){
    api.stop()
});

然后我尝试将js添加到实际的按钮，但我不认为我正确指定它 - 像下面的代码需要别的东西来指向可滚动区域 - 滚动内容是在一个特殊的div在ul.navi上面：

 <ul id="flowtabs" class="navi">
   <li><a href="#one" class="current" onclick="api.stop()"></a></li>
   <li><a href="#two" onclick="api.stop()"></a></li>
   <li><a href="#three" onclick="api.stop()"></a></li>
   <li><a href="#four" onclick="api.stop()"></a></li>
 </ul>

我还尝试将clickable：false添加到history：false下的导航器部分，但这也不起作用。

有人可以帮忙吗？

Answer 1

如果你在jQuery Scrollable查看jquery ui scroll示例的源代码，他们会使用这条指令将api对象分配给当前窗口：

// provide scrollable API for the action buttons
window.api = root.data("scrollable");

你尝试过吗？

单击导航时，Jquery Scrollable无法停止自动播放

1 个答案: