使用jQuery每10秒更改具有淡入淡出效果的div的背景图像 [英] Change background-image of a div with fade effect every 10 seconds with jquery

问题描述

我想在页面的标题区域中创建幻灯片.它应每10秒更改一次背景图像，并具有良好的淡入淡出效果.而且，由于我已经将jQuery用于其他内容，因此我也希望将其用于此.

I would like to create a slideshow in the header area of my page. It should change the background image every 10 seconds with a nice fade effect. And since I'm using jQuery for other stuff already I would like to use it for that as well.

所以我的标记就是:

<div id="header">
    <!--other stuff here...-->
</div>

目前我的CSS是:

#header {
    background:  url('images/header_slides/slide_1.jpg') no-repeat;
}

所以现在我想要的是10秒钟后它将更改为

So now what I want is that after 10 seconds it would change to

#header {
    background:  url('images/header_slides/slide_2.jpg') no-repeat;
}

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

with a nice slow fade effect.

推荐答案

我在

I answered a similar question at How to fill browser window with rotating background Image?. You can fade background colors but not background images. You must have your images in <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so your images acts like a background images and are behind everything else.

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(10000 * index).fadeIn(10000).fadeOut();
    });
}
test();

这篇关于使用jQuery每10秒更改具有淡入淡出效果的div的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！