如何使用Jquery每隔几秒循环一次css背景图像?

我想每隔几秒更改一个标题css背景图像,所以它看起来像幻灯片。

例如,前2秒是:

body#home h1#siteH1 { background:url(../images/header1.jpg) no-repeat;} 

接下来2秒钟:

 body#home h1#siteH1 { background:url(../images/header2.jpg) no-repeat;} 

接下来2秒钟:

 body#home h1#siteH1 { background:url(../images/header3.jpg) no-repeat;} 

然后再循环到header1。

如果有人知道如何以褪色效果进行过渡,那么它将是完美的。

现在随着褪色

试试这个:

 var currentBackground = 0; var backgrounds = []; backgrounds[0] = '../images/header1.jpg'; backgrounds[1] = '../images/header2.jpg'; backgrounds[2] = '../images/header3.jpg'; function changeBackground() { currentBackground++; if(currentBackground > 2) currentBackground = 0; $('body#home h1#siteH1').fadeOut(100,function() { $('body#home h1#siteH1').css({ 'background-image' : "url('" + backgrounds[currentBackground] + "')" }); $('body#home h1#siteH1').fadeIn(100); }); setTimeout(changeBackground, 2000); } $(document).ready(function() { setTimeout(changeBackground, 2000); }); 

签出队列function:

jQuery队列

晚到了派对,但这就是我刚才提出的类似要求。

     
Hello World