更改脚本：每 X 秒循环一次 div 并通过单击按钮手动选择 DIV

Question

在页面Show and hide divs at a specific time interval using jQuery

有一个循环遍历 DIV 的脚本（在另一个之后显示 1 个 DIV，同时隐藏其他 DIV）。

它被称为“每 10 秒循环一次 div”

它工作正常，但我需要通过单击一个特殊按钮来选择一个特殊的 DIV。

有 3 个 DIVS，标题为 1 - 2 - 3（活动为红色） Loop-Script 更改 DIV 并正确显示它们。但是当点击 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();