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

Question

我想每隔几秒更改一个标题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.

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

Answer 1

现在随着褪色

试试这个:

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

Answer 2

检查队列功能：

jQuery 队列