Rotazione automatica immagini con jQuery

Vediamo oggi come realizzare una semplice rotazione di immagini automatica con jQuery che ci permetterà di realizzare una semplice slideshow da utilizzare nel nostro sito web! Lo scopo principale di questo articolo è quello di illustare i concetti basilari passo passo in modo da lasciare poi alla creatività di ognuno la libertà di esprimersi in forme più complesse!

Per vedere un’anteprima di ciò che stiamo per fare puoi dare un’occhiata alla demo:

Dopo aver correttamente incluso la libreria jQuery nella nostra pagina xhtml

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

passiamo a scrivere il codice xhtml che consisterà, molto semplicemente, in un unico div che conterrà l’immagine iniziale da mostrarci e da cui far partire l’animazione.

<div>
 <img src="01.jpg" alt="immagine" />
</div>

Andiamo quindi a scrivere il codice jQuery della nostra animazione.

$(document).ready(function() {
 setInterval (rotateImage, 2500);

Richiamata la funzione document.ready, settiamo l’intervallo di durata della funzione rotateImage (che tra poco dichiareremo) in millisecondi. Questo sarà l’arco di tempo dopo il quale verrà richiamata l’immagine successiva.

var images = new Array ('01.jpg', '02.jpg', '03.jpg');
var index = 1;

Dichiariamo quindi le variabili images e index. La variabile images sarà un array che conterrà il percorso ed il nome dei file delle immagini che andremo a far ruotare. Nel nostro caso, trovandosi nella medesima cartella del file .html, non è stato necessario scrivere il percorso. La variabile index diciamo sia uguale a 1 (perchè avendo già messo l’immagine nel div il ciclo dovrà far in modo che il primo fade mi porti all’immagine 2 e non alla 1).

function rotateImage(){
 $('.big-img img').fadeOut('slow', function(){
 $(this).attr('src', images[index]);
 $(this).fadeIn('slow', function()

a questo punto, dichiariamo la funzione rotateImage con la quale facciamo scomparire l’immagine e comparire la successiva con effetto fadeOut. Per la spiegazione del meccanismo dell’uso di .attr per cambiare l’immagine, oltre alla documentazione ufficiale, vi rimando a questo articolo. Nel caso qui sopra mostrato stiamo facendo in modo che venga prelevato l’attributo “src” dell’immagine che ha l’indice corrispondente a quello che il ciclo sta “percorrendo” in quel momento. Tradotto in termini più semplici, nel nostro caso abbiamo 3 immagini che sono i 3 elementi dell’array. Quando il valore di indice corrisponde a quello del valore dell’elemento dell’array allora mostro quella precisa immagine.

if (index == images.length-1){
 index = 0;
 }
 else{
 index++;
 }

Alla fine della funzione facciamo in modo che il contatore venga incrementato o resettato se tutte le immagini sono state mostrate. Cioè praticamente che cosa accade… Le 3 immagini, essendo elementi di un array hanno valore 0, 1 e 2. Quando lo script parte, avendo noi messo già visibile l’immagine 0, facciamo in modo che index sia 1 così da non rimostrarci l’immagine presente. Arriviamo quindi al punto in cui avviene il fadeOut e viene cambiato l’src dell’immagine. Al primo giro viene preso l’src dell’elemento 1 (quindi la seconda immagine) e ci viene mostrata. Dopodichè visto che index è uguale a 1 viene incrementato di uno e diventa uguale a 2. A questo punto avviene di nuovo il fade e viene mostrata l’immagine con indice 2 (quindi la terza immagine). Arrivati al ciclo if ora index ha assunto lo stesso valore di image-lenght-1 quindi anzichè venire incrementato viene resettato a 0. A questo punto si riparte nuovamente, avviene il fade e questa volta viene caricato l’src dell’elemento 0 dell’array (la prima immagine), in seguito viene rifatto l’incremento e così via.

Lo script completo sarà dunque questo:

$(document).ready(function () {
  setInterval(rotateImage, 2500);
  var images = new Array('01.jpg', '02.jpg', '03.jpg');
  var index = 1;
  function rotateImage() {
    $('.big-img img').fadeOut('slow', function () {
      $(this).attr('src', images[index]);
      $(this).fadeIn('slow', function () {
        if (index == images.length - 1) {
          index = 0;
        } else {
          index++;
        }
      });
    });
  }
});