jQuery 在jquery中使用淡入淡出效果更改身体背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20255903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change the body background image with fade effect in jquery
提问by Marc Ster
Hey i want to fade in a new background image let′s say every 60 seconds. I′ve set the background image like this:
嘿，我想淡入一个新的背景图像，比如说每 60 秒。我已经设置了这样的背景图像：
body {background-image: url(background.jpg);}
Now i want to change it, so after 60seconds it changes to background2.jpg, then after 60 seconds to background3.jpg and so on..
现在我想改变它，所以在 60 秒后它变为 background2.jpg，然后在 60 秒后变为 background3.jpg 等等..
I′ve found a lot of stuff without changing it in the body but just as an image... any quick solutions?
我发现了很多东西，没有在身体上改变它，但只是作为一个图像......有什么快速的解决方案吗？
Thank you!
谢谢！
回答by Deryck
Re-UPDATE of the UPDATE:
更新的重新更新：
Even NEWER Fiddle (without arguments.callee)
甚至较新的小提琴（没有arguments.callee）
Changes:
变化：
- Javascript improvements
- CSS corrections (fits full page now)
- Added option for random sequence of images instead of sequential
- => Alternate version of NEWER Fiddle <= (if OP's img server is down)
- Javascript 改进
- CSS 更正（现在适合整页）
- 添加了随机图像序列而不是序列的选项
- => NEWER Fiddle <= 的替代版本（如果 OP 的 img 服务器已关闭）
BIG UPDATE
大更新
Took the meat of this code from this previous answerand added some bling (using my site background stash lol)
从上一个答案中获取了这段代码的内容并添加了一些金光闪闪（使用我的网站背景藏匿lol）
NEW Super Fiddle
新超级小提琴
Javascript:
Javascript：
$(document).ready(function () {
var img_array = [1, 2, 3, 4, 5],
newIndex = 0,
index = 0,
interval = 5000;
(function changeBg() {
// --------------------------
// For random image rotation:
// --------------------------
// newIndex = Math.floor(Math.random() * 10) % img_array.length;
// index = (newIndex === index) ? newIndex -1 : newIndex;
// ------------------------------
// For sequential image rotation:
// ------------------------------
index = (index + 1) % img_array.length;
$('body').css('backgroundImage', function () {
$('#fullPage').animate({
backgroundColor: 'transparent'
}, 1000, function () {
setTimeout(function () {
$('#fullPage').animate({
backgroundColor: 'rgb(255,255,255)'
}, 1000);
}, 3000);
});
return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';
});
setTimeout(changeBg, interval);
})();
});
CSS:
CSS：
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: relative;
background-image: url(http://www.fleeceitout.com/images/field.2.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: fixed;
}
#fullPage {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 0;
left: 0;
background-color: rgb(255, 255, 255);
}
回答by Dan-Nolan
You can use the setIntervalmethod and switch between classes defined in your CSS which have different background-images:
您可以使用该setInterval方法并在 CSS 中定义的具有不同背景图像的类之间切换：
setInterval(function() {
var $body = $('body');
if($body.hasClass('background1'))
{
$body.removeClass('background1');
$body.addClass('background2');
}
else {
$body.removeClass('background2');
$body.addClass('background1');
}
}, 1000);
This example uses an interval of 1000which is one second. You can change this value for whatever period of time you're looking for.
此示例使用的时间间隔为1000一秒。您可以在所需的任何时间段内更改此值。
UPDATE
更新
Noticed your question asked for a fade so I added a CSS3 property on body:
注意到你的问题要求淡入淡出，所以我在 body 上添加了一个 CSS3 属性：
body
{
transition: background 0.5s linear;
}
The fiddle has been updated.
小提琴已更新。
回答by cssyphus
Building on the answer from Dan-Nolan (formerly user506980), you can also assign the backgrounds to an array and then call each background from the array with a counter
基于 Dan-Nolan（以前的 user506980）的答案，您还可以将背景分配给一个数组，然后使用计数器从数组中调用每个背景
Further, you can assign the setInterval function to a variable, and then use that variable later to stop the repeats.
此外，您可以将 setInterval 函数分配给一个变量，然后稍后使用该变量来停止重复。
$(document).ready(function() {
var cnt=0, bg;
var $body = $('body');
var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg'];
var bgrotater = setInterval(function() {
if (cnt==5) cnt=0;
bg = 'url("' + arr[cnt] + '")';
cnt++;
$body.css('background-image', bg);
}, 1000);
//To stop the backgrounds from rotating. Note the critical step above
//of assigning the setInterval function to a variable, in order to
//use it again (below) to stop the repeating function
$('#some_button_id').click(function() {
clearInterval(bgrotater);
});
}); //END document.ready
Since I built upon Dan-Nolan's answer, please upvote his answer if you upvote this one.And I see that Deryck has added his, and it is also correct. Upvote.
由于我建立在 Dan-Nolan 的回答之上，如果您对这个答案投赞成票，请对他的回答投赞成票。而且我看到Deryck 添加了他的，这也是正确的。点赞。
回答by Kenrick
https://github.com/srobbin/jquery-backstretchBackstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automatically resize as the window/element size changes.
https://github.com/srobbin/jquery-backstretchBackstretch 是一个简单的 jQuery 插件，允许您向任何页面或元素添加动态调整大小、支持幻灯片放映的背景图像。图像将拉伸以适应页面/元素，并随着窗口/元素大小的变化自动调整大小。
回答by George
jQuery(document).ready(function() {
var cnt=0, bg;
var $body = jQuery('body');
var arr = ['secondbg.jpg','sartulebis-archeva2.png'];
animate = function(){
}
var bgrotater = setInterval(function() {
if (cnt==2) cnt=0;
bg = 'url("http://yalcingroup.ge/test/wp-content/uploads/2015/08/' + arr[cnt] + '")';
cnt++;
jQuery('#background_cycler').animate({opacity:1}, 2000, function(){
$body.css('background-image', bg);
});
jQuery('#background_cycler').animate({opacity:0}, 2000);
},10000);
});
});
回答by Juan Pablo Vaca Pliego
Each 12 seconds an image is changed in presentacion container; it can be body tag
每 12 秒在presentacion 容器中更改一个图像；它可以是身体标签
HTML
HTML
<div class="presentacion">
<div class="mask"></div>
</div>
JS
JS
delay(11000) + setTimeout(1000) = 12 sec transition duration = 300 + 300 = 600 msec
delay(11000) + setTimeout(1000) = 12 秒转换持续时间 = 300 + 300 = 600 毫秒
var imgArray = ['image-1', 'image-2', 'image-3'], index = 0;
(function changeBG(){
// mask element only for transition
$('.mask').delay(11000).animate({opacity:1}, 300, function(){
index = (index + 1) % img_array.length;
// in presentacion element change bg images
$('.presentacion').css("background-image", "url('images/bg-"+imgArray[index]+".jpg')");
}).animate({opacity: 0}, 300);
setTimeout(changeBG, 1000);
})();
CSS
CSS
.presentacion {
background-attachment: fixed;
background-color: rgba(0, 0, 0, 0.5);
background-image: url("images/image-1.jpg");
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
position: relative;
width: 100%;
z-index: 0;
opacity: 1;
}
.mask {
background-color: rgba(0,0,0,0);
bottom: 0;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
height: 100%;
z-index: 10;
}
回答by Crimbo
Building on Deryck's answer...
基于德里克的回答......
If jQuery Color does not function properly (which it sometimes does), you can use fadeIn()and fadeOut()instead:
如果 jQuery Color 无法正常运行（有时会），您可以使用fadeIn()和fadeOut()代替：
$(document).ready(function () {
var img_array = [1, 2, 3, 4, 5],
newIndex = 0,
index = 0,
interval = 5000;
(function changeBg() {
// --------------------------
// For random image rotation:
// --------------------------
// newIndex = Math.floor(Math.random() * 10) % img_array.length;
// index = (newIndex === index) ? newIndex -1 : newIndex;
// ------------------------------
// For sequential image rotation:
// ------------------------------
index = (index + 1) % img_array.length;
$('body').css('backgroundImage', function () {
$('#fullPage').fadeOut(1000, function () {
setTimeout(function () {
$('#fullPage').fadeIn(1000);
}, 3000);
});
return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';
});
setTimeout(changeBg, interval);
})();
});
