使用jquery每隔10秒更改一个具有淡入淡出效果的div的背景图像

我想在页面的标题区域中创建幻灯片.它应该每10秒更改一次背景图像,并具有漂亮的淡入淡出效果.而且由于我已经将jQuery用于其他东西,我也想将它用于此.

所以我的标记只是：

<div id="header">
    <!--other stuff here...-->
</div>

我的CSS目前是：

#header {
    background:  url('images/header_slides/slide_1.jpg') no-repeat;
}

所以现在我想要的是在10秒之后它将变为

#header {
    background:  url('images/header_slides/slide_2.jpg') no-repeat;
}

具有良好的慢褪色效果.

解决方法

我在 How to fill browser window with rotating background Image?回答了类似的问题.你可以淡化背景颜色但不能背景图像.您必须将图像放在< img>中标签并默认隐藏它们：none;.给你的图像位置：绝对和z-index：-1,这样你的图像就像背景图像一样,落后于其他一切.

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(10000 * index).fadeIn(10000).fadeOut();
    });
}
test();

查看http://jsfiddle.net/ewsQ7/5/的工作示例