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

我想在页面的标题区域中创建幻灯片。 它应该每10秒更改一次背景图像，并具有漂亮的淡入淡出效果。 而且由于我已经将jQuery用于其他东西，我也想将它用于此。

所以我的标记只是：

我的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

我在如何用旋转背景图像填充浏览器窗口时回答了类似的问题？ 。 您可以淡化背景颜色，但不能淡化背景图像。 您必须将图像放在标签中并默认隐藏它们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上方的图层……