Fond manuel div diaporama

Question

J'ai besoin de faire un diaporama fondu image css. Pour plusieurs raisons, je ne peux pas avoir un div physique dans mon code HTML. C'est le corps avec une classe appelée "home" qui a un arrière-plan actuel. Il y aura 4 photos pour le diaporama, pas plus, pas moins, donc ça n'a pas de dynamique.

J'ai déjà la jquery suivante:

<script type="text/javascript"> 
$(document).ready(function() { 
    var original_image = '#000000 url(images/bg_home.jpg) top center no-repeat'; 
    var second_image = '#000000 url(images/bg_home2.jpg) top center no-repeat'; 
    var third_image = '#000000 url(images/bg_home3.jpg) top center no-repeat'; 
    var fourth_image = '#000000 url(images/bg_home4.jpg) top center no-repeat'; 

    $('.home').click(function() { 
     $(this).css('background', second_image); 
    }); 
}); 
</script> 

Donc, comme vous voyez c'est un script très simple qui ne fonctionne que si je clique sur le -Accueil- général div. Quelqu'un peut-il m'aider à transformer cela en un simple diaporama fondu sans aucun clic? Il devrait juste commencer à exécuter le fade slideshow onload.

Merci beaucoup!

Answer 1

Suggestion:

$(function(){ 
    var images = [ 
     'bg_home.jpg', 
     'bg_home2.jpg', 
     'bg_home3.jpg', 
     'bg_home4.jpg' 
    ], 
    loop = 0, 
    $home = $('.home'); 

    (function fader(){ 
     $home 
     .fadeOut('fast', function(){ 
      $home.css('background', '#000000 url(' + images[loop] + ') top center no-repeat'); 
      $home.fadeIn('fast', function(){ 
       setTimeout(fader, 3000); 
      }); 
     }); 

     if(loop < images.length) 
      loop++; 
     else loop = 0;     
    })();   
});