Ручное фоновое слайд-шоу

Question

Мне нужно сделать слайд-шоу с фоновым изображением CSS.По нескольким причинам у меня не может быть физического div в моем html.Это тело с классом -home- имеет текущий фон.Для слайд-шоу будет 4 картинки, не больше, не меньше, поэтому не нужно динамически.

У меня уже есть следующий jquery:

<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>

Итак, как вывидите, это очень простой скрипт, который работает, только если я нажимаю на общий -home-div.Может кто-нибудь помочь мне превратить это в простое слайд-шоу исчезать без каких-либо щелчков?Он должен просто начать выполнять загрузку затухающего слайд-шоу.

Большое спасибо!

Answer 1

Предложение:

$(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;                
    })();         
});