javascript 没有白色背景的淡入/淡出背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29749708/
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
Fade In / Fade Out background images without white background
提问by Lee
I want to create a website with background images that change over time with a fade in/fade out effect, but I don't want to use the existing jQuery fade in/fade out effect because with when one image faded out, a white background appeared before other image faded in. I found a plugin named Maximagethat suits my request but it uses img tags while I want to work with background-image CSS (I have a good reason for doing this). Does anyone know how to do this?
我想创建一个网站，其背景图像会随着时间的推移而变化并带有淡入/淡出效果，但我不想使用现有的 jQuery 淡入/淡出效果，因为当一个图像淡出时，白色背景在其他图像淡入之前出现。我找到了一个名为Maximage的插件，它符合我的要求，但它使用 img 标签，而我想使用背景图像 CSS（我有充分的理由这样做）。有谁知道如何做到这一点？
Here's my HTML code:
这是我的 HTML 代码：
<div id="wrapper">
//My contain here
</div>
Here's my JavaScript code so far:
到目前为止，这是我的 JavaScript 代码：
//Auto change Background Image over time
$(window).load(function() {
var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg'];
var i = 0;
function changeBackground() {
$('#wrapper').fadeOut(500, function(){
$('#wrapper').css('background-image', function () {
if (i >= images.length) {
i = 0;
}
return 'url(' + images[i++] + ')';
});
$('#wrapper').fadeIn(500);
})
}
changeBackground();
setInterval(changeBackground, 3000);
});
Example: http://www.aaronvanderzwan.com/maximage/examples/basic.html
示例：http: //www.aaronvanderzwan.com/maximage/examples/basic.html
采纳答案by Yves Lange
AHH ! Finally ! I found a nice technique ! I'm using a double wrapper.
啊！最后 ！我发现了一个很好的技术！我正在使用双包装器。
The problem in your code is a bit logical. You can't fadeOut and fadeIn at the same timea single wrapper.
您代码中的问题有点合乎逻辑。您不能在单个包装器中同时使用淡入淡出和淡入淡出。
So the idea is to create two wrapper and to switch between them back and forth. We have one wrapper called: "wrapper_top" that encapsulate the second wrapper called: "wrapper_bottom". And the magic was to put beside the second wrapper: your content.
所以这个想法是创建两个包装器并在它们之间来回切换。我们有一个名为“wrapper_top”的包装器，它封装了名为“wrapper_bottom”的第二个包装器。神奇的是放在第二个包装器旁边：您的内容。
Thus having the structure ready which is the following:
因此，准备好结构如下：
<div id='wrapper_top'>
<div id='content'>YOUR CONTENT</div>
<div id='wrapper_bottom'></div>
</div>
Then a bit of JS+CSS and voilà ! It will be dynamic with any amount of images !!!
然后是一些 JS+CSS 和瞧！任何数量的图像都会是动态的！！！
Here is the implementation: http://jsbin.com/wisofeqetu/1/
回答by CYRIL
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
var i =0;
var images = ['image2.png','image3.png','image1.png'];
var image = $('#slideit');
//Initial Background image setup
image.css('background-image', 'url(image1.png)');
//Change image at regular intervals
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
});
</script>
</head>
<body>
<div id="slideit" style="width:700px;height:391px;">
</div>
</body>
</html>
回答by lubosdz
You may also use jQuery plugin backstretch.
您也可以使用 jQuery 插件backstretch。
回答by Luke
If it doesn't have to be background-image, you can place all the images in your #wrapper, in <img>, it will work like a charm:
如果它不必是背景图像，您可以将所有图像放在 #wrapper, 中in <img>，它会像魅力一样工作：
<div id="wrapper">
<img src="firstImage" class="imageClass"></img>
<img src="secoundImage" class="imageClass"></img>
<img src="thirdImage" class="imageClass"></img>
</div>
then some style. Every image has to be in same spot, so add position relative to #wrapper, and position absolute to .imageClass:
然后一些风格。每个图像都必须在同一位置，因此添加相对于 #wrapper 的位置，并将绝对位置添加到 .imageClass：
#wrapper{
position: relative;
}
.imageClass{
position: absolute;
top: 0;
left: 0;
display: none;
}
display: none; will hide every image.
显示：无；将隐藏每个图像。
Now some JQuery. To appear first image when window load write this:
现在一些JQuery。要在窗口加载时出现第一个图像，请编写：
$(window).load(function() {
$('.imageClass').eq(0).show();
});
by the .eq() "command" you can specify which one element with class '.imageClass' you want to use exactly. Starts with 0. After that just do something like that:
通过 .eq()“命令”，您可以指定要准确使用具有“.imageClass”类的哪个元素。从 0 开始。之后就做这样的事情：
function changeBackground() {
var current = 0;
//tells which image is currently shown
if(current<$('.imageClass').length){
//loop that will show first image again after it will show the last one
$('.imageClass').eq(current).fadeOut(500);
current++;
$('.imageClass').eq(current).fadeIn(500);
} else {
$('.imageClass').eq(current).fadeOut(500);
current=0;
$('.imageClass').eq(current).fadeIn(500);
}
}
changeBackground();
setInterval(changeBackground, 3000);
});
That should work, hope you will like it.
这应该有效，希望你会喜欢它。
