en boucle mes clics de bouton en javascript

Question

Ce sont 4 boutons que j'ai sur ma page Web ci-dessous est le code:

<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> 

Actuellement en page est chargée, tous sont « sur » (bascule fait marche ou arrêt) Comment puis-je les éteindre tous, puis les boucles comme ceci:

1 sur le repos hors
2 sur le repos hors
3 sur le repos hors
4 sur le repos au large
1 sur le repos o ff .... et il continue à boucler.

J'ai essayé cette approche
Qu'est-ce qui ne va pas avec ça?

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

C'est élémentaire, Watson. Récursivité. Un exemple de mise en œuvre peut être comme ceci:

Faites une variable contenant tous vos boutons et une autre variable appelée index (ou quelque chose comme ça). Ensuite, faites une fonction.

Dans cette fonction, vous effectuez une vérification. S'il y a un buttons[index] (l'index n'est pas plus grand ou plus petit que la longueur de tout le tableau de votre bouton), faites index=0. Ensuite, basculez buttons[index] et incrémentez index.

Vous appelez alors setTimeout - le premier paramètre étant le nom de la fonction, le second étant le temps que vous souhaitez attendre avant de le déclencher.

Une fois en dehors de la fonction, appelez le setTimeout de la même manière.

Exemple: http://jsfiddle.net/bVNx2/

Answer 2

Jetez un oeil à cette approche, je pense qu'il peut répondre à vos besoins:

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