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

我想在我的页面的标题区域创建一个幻灯片。它应该每10秒改变一次背景图像，效果很好。既然我已经在用jQuery处理其他东西了，我也想用它来处理这个问题

因此，我的标记只是：

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

现在我想要的是，10秒后，它会变成

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

---

具有很好的缓慢淡入淡出效果。

您无法淡入背景图像。但是你可以用你的下一张背景图片在你的#标题上淡出一层…

我在上一次会议上回答了一个类似的问题。您可以淡入背景色，但不能淡入背景图像。您必须将图像置于

标记中，并在默认情况下隐藏它们

显示：无。给你的图片
位置：绝对
和
z-index:-1
，这样你的图片就像背景图片一样，隐藏在其他一切后面

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

查看中的工作示例，您可以使用CSS3使用过渡使背景图像褪色

查看

对于您的使用，设置jQuery以更改背景图像，但使用CSS应用转换样式。只要背景发生变化，它就会根据CSS3样式进行转换

#header
{
    background: url('images/header_slides/slide_1.jpg') no-repeat;
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
}

这是一个更健壮的版本。它将继续循环并从一个图像淡入下一个图像：太好了，有很多方法可以改进和增加它。顺便说一下，在您的示例中，您可以只执行$（“#container img”）.first（）.appendTo（“#container”）.fadeIn（5000）.fadeOut（5000）；而不是两次调用容器。否，因为在第二次调用时，DOM顺序已更改。我淡出第一个图像，将其移动到容器的末端，然后同时淡出第二个图像（现在是第一个）。这提供了交叉淡入淡出效果，并允许我在每次淡入淡出之间暂停。但是，是的，有很多方法可以做到这一点。哇，这正是我想要的！非常感谢你，特别是你的例子@杰夫B.为小提琴手干杯。完全帮助我完成了一个非常快速的客户模型。在我的设计中不能使用任何绝对的东西，很遗憾，这将永远不会看到生产，但无论如何，干杯。很好的答案。但今后请不要将w3schools用作可信的参考。
#header
{
    background: url('images/header_slides/slide_1.jpg') no-repeat;
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
}