javascript - 更改脚本 : Loop through divs every X seconds PLUS select DIV manually by clicking button

Question

在页面上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 白痴(= 我...)

:-)

谢谢!

Answer 1

“简单地说:单击按钮 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();