在页面上Show and hide divs at a specific time interval using jQuery
有一个循环遍历 DIV 的脚本(一个接一个地显示 1 个 DIV,同时隐藏其他的)。
这叫做“每 10 秒循环一次 div”
它工作正常,但我还需要通过单击一个特殊按钮来选择一个特殊的 DIV。
有 3 个 DIVS,标题为 1 - 2 - 3(事件为红色)循环脚本更改 DIV 并正确显示它们。 BUt when click on 2 DIV Nr. 2 应该变得活跃。 (并且循环应该继续进行 Nr. 3 - 1 - 2 ....
简单地说:当点击按钮 3 时我如何告诉脚本“counter = 3”
http://nill-theobald.de/index-test1.html = 基于计时器的脚本 (http://nill-theobald.de/index-test2.html = 通过点击(完全不同的脚本))
请:告诉一个完整的 javascript 白痴(= 我...)
:-)
谢谢!
最佳答案
“简单地说:单击按钮 3 时如何告诉脚本“counter = 3””——我假设您的意思是显示的脚本 here
假设您有一个这样的按钮(例如):
<input type="button" id="button-3" value="Click me">
处理点击的 JS 很简单:
$("#button-3").click(function() {
counter = 3;
});
此处理程序必须与计数器变量在同一范围内才能使其工作(如果是上面链接的脚本,它可以在声明 var counter = 0; 之后);
编辑: 还有一件事。为了确保 div 的切换在预期的时间内发生,您必须强制执行一些 intervalId 管理。
HTML:
<a href="#" class="button" rel="1"><img width="11" height="10" alt="video 1" src="orange.gif"></a>
<a href="#" class="button" rel="2"><img width="11" height="10" alt="video 1" src="grau.gif"></a>
<a href="#" class="button" rel="3"><img width="11" height="10" alt="video 1" src="grau.gif"></a>
JS:
$(".button").click(function() {
counter = parseInt(this.rel);
showDiv(); // show next div
setIntervalSwitch(); // reset the interval so the next "switch" is in X seconds
});
var intervalId;
var setIntervalSwitch = function() {
clearInterval(intervalId); // clear old interval
// now start interval again
intervalId = setInterval(function () {
showDiv(); // show next div
}, 5 * 1000);
}
// call the setIntervalSwitch to initialize interval before someone manually click on any div
setIntervalSwitch();
关于javascript - 更改脚本 : Loop through divs every X seconds PLUS select DIV manually by clicking button,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7227715/