immagini in scorrimento

**kiocciolina** · 23-06-2009, 20:14

Salve a tutti!
Starei cercando di inserire nel mio sito delle immagini in scorrimento.
Mi spiego meglio: sono una serie di 3 immagini, e vorrei che rimanessero sullo schermo per un tempo definito (5-10 secondi ciascuna), ed ognuna delle diverse immagini che così si avvicendano ha un link differente.
Ho provato a cercare su html.it, ma non so con che dicitura cercare, quindi ho fatto sostanzialmente un buco nell'acqua.
Esiste uno script o qualcosa che mi permetta di ottenere un simile risultato?
Grazie mille!

**Enzaccio** · 24-06-2009, 03:02

Codifica ogni tag d' immagine col suo link, entro un proprio DIV al quale assegnerai diverso ID ciascuno; il primo DIV è display: block; ed è subito visibile, gli altri due sono a display: none; e una funzione JavaScript muterà il loro stato da none a block, da block a none ecc.
Tutti e tre, occupano quindi lo spazio di uno solo, uno spazio condiviso che prevederai nella pagina.
Ecco un modello, poi semmai domani te lo spiego meglio.
L' avvicendamento dei DIV avviene ora ogni 3 secondi, in base al numero 3000 che vedi nel setTimeout (è un timer); portalo a 5000 o 10000 (viene espresso in milli-secondi).

codice:

<html>
<head><title>Rotating DIVs</title>

<script type="text/javascript">

var which = 1;

function turn(){
 document.getElementById("group"+which+"").style.display="block";
 setTimeout('change();', 3000);
 }

function change(){
 document.getElementById("group"+which+"").style.display="none";
 if(which<3){
    which ++;
    } else {
    which = 1;
    };
 turn();
 }

</script>

</head>
<body bgcolor="#ff9090" onload="turn();">
<div align="center">



<div id="group1" style="display: block;">
 [img]images/photo01.jpg[/img]
</div>

<div id="group2" style="display: none;">
 [img]images/photo02.jpg[/img]
</div>

<div id="group3" style="display: none;">
 [img]images/photo03.jpg[/img]
</div>


</div>
</body>
</html>

Essenziale che ci sia un comando che attiva la prima funzione JavaScript avviando la sequenza; qui è rappresentato dal gestore d' evento onLoad associato al Tag BODY

<body bgcolor="#ff9090" onload="turn();">

Discussione: immagini in scorrimento

Strumenti discussione

Ricerca discussione

Visualizza

immagini in scorrimento

Permessi di invio