Question

我在身体{background: url(banner1.jpg)}

的背景中使用横幅图片

我有多个图像，如banner1.jpg，banner2.jpg，banner3.jpg。

我想在5-10秒的特定间隔后自动更改图像。

如何使用jQuery执行此操作？我不想使用内嵌图像。

Answer 1

只需设置元素的background-image：

$(elem).css('background-image', 'url(banner2.jpg)');

编辑淡入淡出，你需要淡化容器元素：

$(elem).fadeOut('fast', function() {
     $(elem).css('background-image', 'url(banner2.jpg)')
         .fadeIn('fast');
});

Answer 2

var images = ['banner1.jpg', 'banner2.jpg', 'banner3.jpg'];
var i = 0;

setInterval(function(){
    $('body').css('background-image', function() {
        if (i >= images.length) {
            i=0;
        }
        return 'url(' + images[i++] + ')'; 
    });
}, 5000);

的更新： 的如果你想平滑地改变图像，我建议将所有横幅图像放到一个图像中，并将其设置为主体的背景图像，然后使用.animate方法和背景位置来改变横幅图像。

Answer 3

我想说这些信息非常有用，而且很有效。我使用JQuery尝试了不同的东西：

HTML：

<div id="pic"></div>
<div id="bat"></div>

CSS：

#pic {
    position: absolute;
    z-index: -98;
    top: 0;
    left: 0;
    background-image: url ('http://wallpaperfast.com/wp-content/uploads/2013/05/Calm-sea-breeze-notebook-background-images-Desktop-Wallpaper.jpg');
    display: none;
}
#bat {
    position: absolute;
    z-index: -98;
    top: 0;
    left: 0;
    background-image: url('http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg');
    display: none;
}

JS：

 $('#pic').css({
     height: $(window).height(),
     width: $(window).width()
 }).fadeIn('slow', function () {
     $('#pic').css('background-image', 'url(http://wallpaperfast.com/wp-content/uploads/2013/05/Calm-sea-breeze-notebook-background-images-Desktop-Wallpaper.jpg)');
     $('#pic').fadeOut('slow');
     $('#pic').fadeIn('slow');
 });

jsfiddle

身体背景图像随着使用jQuery褪色而改变？

3 个答案: