0

我制作了一个简单的 jQuery 滑块，带有下一个和上一个按钮来移动幻灯片。我现在想让它在未手动按下按钮时自动滚动。然后我希望它在有人悬停在幻灯片上时停止滚动，并在他们没有悬停在幻灯片上时重新开始。

我在这里使用了这段代码，但它只滚动第一张幻灯片，它不会继续这样做。

setTimeout(function() {
    jQuery('#next').trigger('click');
}, 1000);
}

我怎样才能让它不断地滑动，但我怎样才能让它在悬停在幻灯片上时停止？

我的 html 标记是这样的：

<ul class="nav">
    <li><a id="prev" onclick="prev()"></a>Prev</li>
    <li><a id="next" onclick="next()"></a>Next</li>
</ul>
<div id="viewport">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</div>

在这里也可以看到使用中的脚本：http: //www.samskirrow.com/projects/carousel

现在我正在使用这个 jQuery 代码。滑块会自行更改并在悬停时停止......但它不会在页面加载时开始。我需要做哪些改变？？

jQuery('#viewport').hover(function() {
window.clearInterval(timer);    
}, function() {
timer = window.setInterval(function(){ jQuery('#next').trigger('click');
}, 1000);
});
4

2 回答 2

3

您可以使用setInterval函数，它为您提供一个计时器实例。然后，您可以在需要停止触发时（即在悬停期间）调用clearInterval函数。

var timer = setInterval(function(){...}, 1000); //whenever you need the periodical call
...
...
clearInterval(timer); //whenever you want to clear it

在您的情况下，您可以定义三个函数和一个变量：

var timer = null;
var triggerFunc = function(){ jQuery('#next').trigger('click');};
var periodicFunc = function() {timer = window.setInterval(triggerFunc , 1000);};
var clearFunc = function() {window.clearInterval(timer);};

那么你的逻辑就会变得非常简单：

jQuery('#viewport').hover(clearFunc ,periodicFunc);
periodicFunc();

注意最初的调用periodFunc();。

于 2013-03-30T13:08:04.440 回答
0

您几乎可以使用相同的语法。

超时：

timeoutvariable = setTimeout(function(){},1000);
clearTimeout(timeoutvariable);

有间隔

intervalvariable = setTimeout(function(){},1000);
clearInterval(intervalvariable);

然而，话虽如此，我建议以 html 元素与行为更加分离的方式对滑块的行为进行编码。

与其经常触发点击事件，不如next()直接从区间内调用。这允许您通过按钮以外的东西使用下一个功能，而不是总是依赖于按钮在那里。（更多可重用的代码）

于 2013-03-30T13:26:14.587 回答