Question

我需要做一个CSS背景图像淡入淡出幻灯片。由于几个原因，我不能在我的HTML中有一个物理div。这是具有当前背景的称为“家”的类的身体。幻灯片将会有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;     
    })();   
});