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/

处的工作示例

Answer 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 */
}

Answer 3

您无法淡化背景图片。但是你可以使用下一个背景图像淡化#header上方的图层......

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

3 个答案:

检查http://jsfiddle.net/ewsQ7/5/