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

【问题标题】：Change background-image of a div with fade effect every 10 seconds with jquery使用 jquery 每 10 秒更改一次具有淡入淡出效果的 div 的背景图像
【发布时间】：2011-03-31 23:16:39
【问题描述】：

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

具有不错的缓慢淡入淡出效果。

【问题讨论】：

标签： jquery background-image fade

【解决方案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/查看工作示例

【讨论】：

这是一个更健壮的版本。它将继续循环并从一个图像淡化到下一个图像：jsfiddle.net/jtbowden/hYEzV
太好了，有很多方法可以改进和补充这一点。顺便说一下，在您的示例中，您只需执行 $("#container img").first().appendTo('#container').fadeIn(5000).fadeOut(5000);而不是调用容器两次。
不，因为到第二次调用时，DOM 顺序发生了变化。我正在淡出第一个图像，将其移动到容器的末尾，然后同时淡入第二个图像（现在是第一个）。这会产生交叉淡入淡出效果，并允许我在每次淡入淡出之间暂停。但是，是的，有很多方法可以做到这一点。
哇，这正是我想要的！非常感谢你的榜样！
@Jeff B. 为小提琴手干杯。完全帮助我在那里建立了一个非常快速的客户模型。不幸的是，在我的设计中不能使用任何绝对的东西，所以这永远不会看到生产，但无论如何都欢呼。

【解决方案2】：

您可以使用 CSS3 使用过渡淡化背景图像。

查看https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

为了您的使用，设置 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 */
}

【讨论】：

很好的答案。但以后请不要将 w3schools 用作可信赖的参考。 w3fools.com

【解决方案3】：

您不能淡化背景图像。但是您可以使用下一张背景图片淡化 #header 上方的图层...

【讨论】：