我正在使用可通过导航滚动的 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 添加到实际按钮中,但我认为我没有正确指定它 - 类似下面的代码是否需要其他东西来确定可滚动区域 - 滚动内容位于 ul 上方的单独 div 中。导航:
<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 下的导航器部分,但这也不起作用。
任何人都可以帮忙吗?