身体背景图像随着使用jQuery淡化而改变？

我在背景中使用横幅图像的身体{background: url(banner1.jpg)}身体背景图像随着使用jQuery淡化而改变？

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

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

如何用jQuery做到这一点？我不想使用内联图像。

2012-01-29 Jitendra Vyas

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);

更新： 如果你wan我建议将所有横幅图片放入一张图片，并将其设置为身体的背景图片，然后使用背景位置的.animate方法更改横幅图片。

来源

2012-01-29 13:35:06 xdazz

我将不得不保留在CSS'body {background-image：url（../ images/banner1.jpg）'？ – 2012-01-29 13:49:22

我试过你的代码，它的工作，但我想顺利地改变图像。 – 2012-01-29 13:49:43

@JitendraVyas你可以保留它，或者先设置一次使用jQuery的css。 – xdazz 2012-01-29 13:51:01

只需设置元素的background-image：

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

编辑以淡入淡出，你需要褪色的容器元素：

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

来源

2012-01-29 13:29:26 ori

图像将如何与淡入和出更改 – 2012-01-29 13:30:37

查看修订后的答案 – ori 2012-01-29 13:32:40

另请注意，您必须预先加载图片才能在第一次访问该页面时生效。 – rcdmk 2012-01-29 13:42:11

我想说这个信息是非常有用的，它的工作原理。我尝试不同的东西使用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

来源

2013-07-29 19:54:35 jquery

身体背景图像随着使用jQuery淡化而改变？

回答

相关问题