Tramite lo script che andremo ad analizzare verrà implementata una presentazione di immagini.
Le immagini verranno presentate in sequenza e saranno resi disponibili due bottoni, uno per avviare la presentazione e l’altro per fermarla.
Innanzitutto vediamo il codice javascript:

// Realizzo una matrice contenente le immagini da presentare
var immagini = new Array();
immagini[0] = new Image();
immagini[0].src = "uno.jpg";
immagini[1] = new Image();
immagini[1].src = "due.jpg";
immagini[2] = new Image();
immagini[2].src = "tre.jpg";
immagini[3] = new Image();
immagini[3].src = "quattro.jpg";

var timeout;
var index = 0;

// Funzione che sostituisce un'immagine con la successiva
function RotazioneImmagini(){
     document.getElementById('box_immagine').src = immagini[index].src;
     index++;
     if(index>=immagini.length){
          index = 0;
     }
     timeout = setTimeout('RotazioneImmagini();', 1000);
}

// Funzione che permette di interrompere la rotazione delle immagini
function StopRotazione(){
     clearTimeout(timeout);
}

Prima di analizzare il codice javascript vediamo, per completare, la porzione di html necessaria:

<img src='uno.jpg' id='box_immagine'/>
<br/>
<input type='button' value='Start Presentazione' onClick='RotazioneImmagini();'/>
<input type='button' value='Stop Presentazione' onClick='StopRotazione();'/>

Le prime righe del codice javascript impostano la matrice contenente le immagini che inseriremo nella presentazione di diapositive. Nel codice vengono istanziate 4 immagini ma nessuno ci vieta di aumentarne il numero.
Dopo che le immagini sono state precaricate vengono dichiarate due variabili, la prima (timeout) tiene traccia di ogni timeout, mentre la seconda (index) mantiene il puntatore all’immagine successiva da visualizzare.
Successivamente troviamo la funzione RotazioneImmagini() che dopo aver sostituito l’immagine attuale con la successiva, richiama se stessa dopo un secondo. Da notare come nella funzione, dopo la sostituzione dell’immagine, venga incrementato di 1 il valore di index che punterà all’immagine successiva.
Infine la funzione StopRotazione() permette di interrompere la rotazione delle immagini.
Ultima cosa da notare è nel codice html, infatti per gestire lo spazio dedicato all’immagine è stato necessario assegnare un id (box_immagine) al tag img.

Cliccando qui è possibile vedere in esecuzione il codice completo