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

Question

我想在页面的标题区域创建幻灯片。它应该每 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;
}

具有漂亮的缓慢淡入淡出效果。

Answer 1

我在How to fill browser window with rotating background Image?回答了类似的问题。您可以淡化背景颜色，但不能淡化背景图像。您的图像必须位于 <img> 中标签并默认隐藏它们 display:none; 。提供您的图像 position:absolute和z-index:-1所以你的图像就像背景图像一样，位于其他所有图像的后面。

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

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