jQuery: header con rotazione di immagini

Poco fa ho pubblicato un articolo su onwebdev in cui mostro una semplice implementazione di una rotazione di immagini sull'header di un sito. Il codice funziona come ci si attende, ma non sono del tutto convinto della bontà delle scelte fatte. Vediamo perchè.

Ho creato un singleton con un unico metodo pubblico, rotate(). Questo metodo crea un timer JavaScript che si limita semplicemente a ripetere una routine in modo infinito. L'effetto di rotazione viene creato a partire da un array di immagini. Ossia:

  1. l'immagine scompare con il metodo fadeOut()
  2. il suo attributo src viene impostato sul valore corrente dell'array
  3. l'immagine ricompare con il metodo fadeIn()

Il codice è il seguente:


var Rotator = new function() {

  var header = $('#headerimg', '#header');
  var img = $('img', header);
  var images = ['1.jpg', '2.jpg', '3.jpg'];
  
  this.rotate = function() {
  
    var timer = setTimeout(function() {
    
    
      img.fadeOut(2000, function() {
      
        img.attr('src', images[1]).fadeIn(2000, function() {
        
          img.fadeOut(2000, function() {
          
            img.attr('src', images[2]).fadeIn(2000, function() {
            
            
              img.fadeOut(2000, function() {
              
                img.attr('src', images[0]).fadeIn(2000);
              
              
              });
            
            
            });
          
          
          
          });
        
        
        });
      
      });
    
    
      setTimeout(arguments.callee, 12000);
    
    }, 100);  
  
  };

}();

$(function() {

  Rotator.rotate();


});

Quello che non mi convice è il fatto che ho dovuto accedere ai valori dell'array in modo esplicito e non automatico. Va da se che con un array contenente molte immagini questa soluzione presenta dei limiti.

La difficoltà maggiore nell'implementare un sistema automatico sta nel gestire la visibilità dell'immagine quando il ciclo è compiuto. Un ciclo del genere:


var timer = setTimeout(function() {

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

  // usa index come indice dell'array
  
  img.fadeOut(2000, function() {
  
    img.attr('src', images[index]);
  
  
  }).fadeIn(2000);
  
  setTimeout(arguments.callee, 4000);


}, 100);

Cosa succede quando il contatore raggiunge il limite consentito? Ho notato che l'immagine resta nascosta, quindi sarebbe opportuno operare un reset sulla visibilità. Aspetto vostri suggerimenti.

L'esempio originale si trova in questa pagina.

Torna su