使用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

我在如何用旋转背景图像填充浏览器窗口时回答了类似的问题？.您可以淡化背景颜色,但不能淡化背景图像.您必须将图像放在<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 上方的图层...