在 javascript 中循環我的按鈕點擊

Question

這些是我網頁上的 4 個按鈕，下面是代碼：

<div id ="topbar" width="80%; height:20px;" style="text-align:center">
    <input type="button" value="Click first" onclick="button.toggle();"></input>
    <input type="button" value="Click second" onclick="button2.toggle();"></input>
    <input type="button" value="Click third" onclick="button3.toggle();"></input>
    <input type="button" value="Click fourth" onclick="button4.toggle();"></input>
</div>

目前，當頁面加載時，它們都是“打開”（切換打開或關閉）我如何將它們全部關閉，然后像這樣循環它們：

1 開 rest 關
2 開 rest 關
3 開 rest 關
4 開 rest 關
rest 上的 1 關閉....並且它一直在循環。

我已經嘗試過這種方法
這有什么問題？

setInterval ( "loop()", 2000 );

function loop ( )
{
setTimeout ( "SetLayer1()", 1000 );
}

function SetLayer1()
{
button.toggle(); //all off since all of them are on from start
button2.toggle();
button3.toggle();
button4.toggle();
}
function SetLayer2()

button.toggle(); // button 1 on rest off
//button2.toggle();
//button3.toggle();
//button4.toggle();
}
function SetLayer3()
{
button.toggle(); // button 1 off
button2.toggle(); //button 2 on
//button3.toggle();
//button4.toggle();
}
function SetLayer4()
{
//button.toggle();
button2.toggle();// button 2 off
button3.toggle();// button 3 on
//button4.toggle();
}

Answer 1

這是基本的，華生。 遞歸。 一個示例實現可以是這樣的：

制作一個包含所有按鈕的變量和另一個名為index的變量（或類似的東西）。然后，制作一個 function。

在 function 里面，你檢查一下。 如果有buttons[index] （索引不大於或小於所有按鈕數組的長度），請設置index=0 。 然后，切換buttons[index]並增加index 。

然后調用setTimeout - 第一個參數是 function 的名稱，第二個參數是在觸發它之前要等待的時間量。

一旦在 function 之外，以相同的方式調用setTimeout 。

示例： http://jsfiddle.net/bVNx2/

Answer 2

看看這種方法，我認為它可能滿足您的需求：

http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/