10 agosto 2008

Cambio di una Serie di Immagini con Javascript ogni due Secondi

Come creare uno script che cambia una serie di immagini per il vostro sito.
Questo script cambia dopo due secondi tre thumbnail diverse di libri riguardanti il linguaggio python.



<html>
<head>
<script type="text/javascript">

var inizioImmagine = 1;
var altreImmagini = 3;

function vai_onload(){
setTimeout("switchImage()", 2000);
} // inizio dopo due secondi lo slideshow

function switchImage(){

inizioImmagine++;
document.python.src = "python" + inizioImmagine + ".jpg";

if (inizioImmagine < altreImmagini){
setTimeout("switchImage()", 2000);
// dopo due secondi cambio immagini
}
}
</script>
</head>
//l'evento onload fa partire in modo automatico lo slideshow
//bisogna ricordarsi pero di inserirlo nel corpo del documento html
<body onload="vai_onload()">
<img src="python1.jpg" title="python">
</body>
<html>

Normalmente in questo script si puo incrementare sia il numero delle immagini,
che la velocita o il rallentare dello slideshow. Un'ultima cosa ricordatevi che
l'evento onload va inserito nel corpo html tra i tag <body> e </body>
per poter richiamare in modo automatico lo script all'apertura di una pagina web.

2 commenti:

Anonimo ha detto...

Sicuro che funzioni?
Perchè ho provato a utlizzarlo sul mio sito ma non mi parte...

@rchie ha detto...

Di funzionare "funzionava" quando l'ho provato a suo tempo. Anche perché posto solo materiale provato personalmente.

Comunque verifica bene il path delle immagini, in questo esempio stava tutto nella stessa cartella.

Dovresti fare attenzione alla riga qui sotto e eventualmente correggere con il tuo percorso sul server.

inizioImmagine++;
document.python.src = "python" + inizioImmagine + ".jpg";