Question

我制作了一个简单的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);
});

Answer 1

您可以使用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();。

Answer 2

你会使用相同的语法。

超时：

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

有间隔

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

然而，尽管如此，我建议以滑块的方式编码滑块的行为，其中html元素与行为更加分离。

不要经常触发点击事件，只需直接从间隔内部调用next()即可。这允许您通过按钮以外的其他功能使用此下一个功能，而不是始终依赖于按钮。（更可重用的代码）

jQuery触发器无限点击

2 个答案: