更改背景图片 - javascript [英] Changing background image - javascript
问题描述
我想使用JavaScript更改背景图片。
I would like to change a background image with JavaScript.
JS：
<head>
<script type="text/javascript">
// Ta funkcja odpowiedzialna jest odpowiedzialna za zmiane obrazow w tle
$(window).load(function(){
var i = 0;
var images = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];
var image = $('#slideit');
image.css('background-image', 'url(images/1.jpg)');
image.css('background-size', 'cover');
setInterval(function(){
image.css('background-image', 'url(' + images [i++] +')');
// image.fadeOut(1500, function (){
// image.fadeIn(1000);
// })
if(i == images.length) i = 0;
}, 6000);
});
</script>
</head>
HTML：
<body id="slideit" style="width:100%;height:100%;">
问题在于使图像平滑变化。注释掉的代码使网站中的所有内容都淡入淡出，除了背景。为什么会发生这种情况？此代码工作，但不会平滑地更改图像。
The problem is in making the images change smoothly. The commented out code makes everything in the website fade in and fade out except the background. Why is this happening? This code works but does not change the image smoothly. How can I fade the images in and out?
推荐答案
不幸的是CSS不支持背景图片的动画（通过转换）。为什么？其实，我不知道为什么。但它足以知道他们不。 Javascript直接通过扩展CSS功能。总之，如果你没有编写一个非常复杂的代码设计来破坏它的功能，你无法使用Javascript来做。
Unfortunately CSS does not support the animation (via transition) of background images. Why? Actually, I'm not sure why. But it's enough to know they don't. Javascript works directly by extending CSS functionality. In short, what you want to do can't be done with Javascript without writing a very convoluted piece of code designed at hacking its functionality.
有一个简单的工作使用jQuery，然而，这实际上会使你的源也不那么复杂。让身体相对，将每个单独的背景图片添加到您的来源的底部（以便在所有其他内容加载后）。让我们用 #backgrounds 。
There is an easy work around using jQuery, however, which will actually make your source less complex too. Make the body relative, add each individual background image to the bottom of your source (to make them load after everything else) inside a named wrapper. Let's go with #backgrounds.
<style>
body{
height:100%;
position:relative
}
#backgrounds img{
position:absolute;
z-index:1; // this is important
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
display:none;
}
#wrapper{
position:relative;
z-index:3; // again, this is important
}
</style>
我们将包装器的z-索引设置为高于图像的Z-索引，是在他们的前面，因此给出错觉图像是背景图像。如果你想要一个 background-attachment：fixed c> / code>效果。我假设你想要他们的宽度和高度是视口的;改变他们到任何，如果不是。我们将图片设置为 display：none ，以在加载网页时停止所有图片。 Yuck！
We set the z-index of the wrapper to be higher than that of the images so that our content is in front of them, thus giving the illusion the images are background images. Change position:absolute to position:fixed if you want a background-attachment:fixed effect. I'm assuming you want their widths and heights to be that of the viewport; change them to whatever if not. We set the images to display:none to stop them all loading when the page loads. Yuck!
<div id="wrapper">
all of your page are belong to us...
</div>
<div id="backgrounds">
<img src="background/one.jpg" alt="">
<img src="background/two.jpg" alt="">
<img src="background/three.jpg" alt="">
</div>
然后使用基于图像数量的计数器剪切和粘贴更多的图像在后面没有任何努力）：
And then simply cycle through each image using a counter based on the number of images (so you can easily cut and paste more images in later without any effort):
$(function(){
var total = $('#backgrounds img').length;
var counter = 1;
function cycle(){
// Makes old backgrounds appear beneath new ones
$('#backgrounds img').css('z-index','1')
// Set it to display and opacity 0 so we get the effect
$('#backgrounds img:nth-child('+counter+')').css({'opacity':'0','display':'block','z-index':'2'})
// Fade the background in
$('#backgrounds img:nth-child('+counter+')').animate({'opacity':'1'},1500)
// increase the counter
counter++
// make sure we're working within the quantity of images we have
if( counter > total ){ counter = 1 }
}
cycle();
setInterval(function(){cycle()},6000);
})
这篇关于更改背景图片 - javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
