我想在页面的标题区域中创建幻灯片.它应该每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;
}
具有良好的慢褪色效果.
解决方法
我在
How to fill browser window with rotating background Image?回答了类似的问题.你可以淡化背景颜色但不能背景图像.您必须将图像放在< img>中标签并默认隐藏它们：none;.给你的图像位置：绝对和z-index：-1,这样你的图像就像背景图像一样,落后于其他一切.
function test() {
$("img").each(function(index) {
$(this).hide();
$(this).delay(10000 * index).fadeIn(10000).fadeOut();
});
}
test();
查看http://jsfiddle.net/ewsQ7/5/的工作示例
