Ho scarabocchiato questo per conciliare il sonno; spero ti torni utile e gradito.
Tre semplici DIV (ma puoi aggiungerne altri) sono in partenza a display: none; e i contenuti non appaiono.
La funzione ne muta uno alla volta a display="block" seguendo la variabile t che da zero, assume valori crescenti 0 1 2 con t++; e l' if-statement che la riporta a 0 per ricominciare.
Ma per prima cosa, la funzione resetta tutti i DIV a "none" (nascosti), con l' esecuzione del for; così facendo, richiude quello aperto precedentemente.
4000 significa 4 secondi in setTimeout('turn()', 4000); che puoi modificare per la cadenza che vuoi.codice:<html> <head><title>rotating contents</title> <script type="text/javascript" language="javascript"> <!-- var t = 0; function turn() { group = document.getElementById("box"); single= group.getElementsByTagName("div"); for(x=0; x<single.length; x++){ single[x].style.display="none"; } single[t].style.display=""; t++; if(t==single.length){t=0}; setTimeout('turn()', 4000); } //--> </script> </head> <body bgcolor="#004000" text="#E3E3E3" onload='turn();'> <h1>Straystudio</h1> <div id="box" style="width: 750px; height: 30px; border: thick solid white;"> <div style="display: none; height: 30px; background-color: #A0A000; color: #0000FF; padding-left: 8px; font-family: Arial, sans-serif;"> CONTENUTO 1</div> <div style="display: none; height: 30px; background-color: #A3A; color: #FFF; text-align: center; font-family: Times New Roman;"> CONTENUTO 2 | Vai al thread </div> <div style="display: none; height: 30px; background-color: aqua; color: red; padding-left: 8px; font-family: Impact, sans-serif;"> CONTENUTO 3 </div> </div> </body> </html>
Si può anche scrivere setTimeout('turn()', speed); e in alto allo script dichiarare anche la variabile
var speed = 4000;
questa forma è utile specialmente in script vasti, per evitare di dover andare ad editare tra le righe.
Si possono aggiungere onMouseOver e onMouseOut al DIV ID="Box" per fermare e poi far ripartire il timer.

</div>
<div style="display: none; height: 30px; background-color: #A3A; color: #FFF; text-align: center; font-family: Times New Roman;">
CONTENUTO 2 |
Rispondi quotando