Semplice slideshow con jQuery

Bastano poche righe di codice JavaScript/jQuery per creare un semplice slideshow di immagini con transizione con effetto dissolvenza.
Abbiamo aggiunto una piccola nota di colore: al variare delle immagini cambia, in modo graduale, anche il colore di sfondo della pagina.

DEMO

Il codice HTML include tutte le immagini in un div con id slidelist; ogni immagine ha classe slide e un attributo personalizzato data-bg (valido con un doctype HTML5), che contiene il codice esadecimale del colore di sfondo associato all'immagine stessa. Per ogni immagine sono anche specificati la larghezza, l'altezza e l'attributo alt, contenente il testo alternativo.

<div id="slidelist">
<img class="slide" data-bg="44C34E" src="nomefile.ext" height="420" width="640" alt="testo alternativo" />
<img class="slide" data-bg="B3E601" src="nomefile.ext" height="420" width="640" alt="testo alternativo" />
</div>

Il codice JavaScript, da inserire in head, fa uso delle librerie jQuery e jQuery UI:

$(document).ready(function(){
  $('img.slide').css('position','absolute');
  $('#slidelist img:gt(0)').hide();
});

setInterval(function(){
var bkcolor = $('#slidelist :first-child').next('img').attr('data-bg');
$('#slidelist :first-child').fadeOut(800,function(){
      $('html').animate({backgroundColor: '#'+bkcolor},1600);
    }).next('img').fadeIn(1600).end().appendTo('#slidelist');}, 5000);

Al caricamento del DOM vengono nascoste tutte le immagini ad esclusione della prima e viene loro assegnato un posizionamento assoluto. Questo si sarebbe potuto ottenere anche con i CSS ma si è preferito assegnare queste regole di stile attraverso JavaScript per fare in modo che tutte le immagini siano fruibili anche per chi naviga con JavaScript disabilitato.

Grazie al metodo setInterval viene eseguita la funzione che regola la transizione delle immagini e la variazione del colore di sfondo nell'intervallo di tempo specificato, in questo esempio ogni 5000 millisecondi, che corrispondono a 5 secondi.

Nella variabile bkcolor viene memorizzato il codice esadecimale del colore associato al primo elemento figlio :first-child del div con id slidelist, quindi alla prima immagine.
A questa viene quindi applicato un effetto dissolvenza della durata di 800 millisecondi, con il metodo .fadeOut
I metodi .fadeIn/Out prevedono la possibilità di richiamare una funzione nel momento in cui è terminata l'animazione. In questo caso viene utilizzato il metodo .animate per far variare in modo graduale il colore di sfondo del tag html, variazione di colore che è possibile solo grazie a jQuery UI.

L'immagine successiva .next('img') viene visualizzata, sempre con effetto dissolvenza, con un tempo di transizione di 1600 millisecondi con il metodo .fadeIn
Il metodo .end ripristina gli elementi della collezione, cioè riporta il controllo sul selettore oginario #slidelist:first-child

Da ultimo il metodo .appendTo  sposta la prima immagine in coda alle immagini presenti, permettendo in questo modo di ricominciare il ciclo.

Per approfondire l'argomento:

• Color Animation - jQuery UI