javascript 使用背景图像的 jquery 幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5197054/
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
jquery slideshow using background images
提问by Tom
I have a div which currently has a static background image.
我有一个当前具有静态背景图像的 div。
I need to create a slideshow of background images for this div.
我需要为此 div 创建背景图像的幻灯片。
I am able to achieve this by just setting a timeout and then changing the background image in the CSS but this is not very elegant.
我可以通过设置超时然后更改 CSS 中的背景图像来实现这一点，但这不是很优雅。
I would ideally like to fade the background images out and in, but the div contains other page elements so I can not alter the opacity in any way.
理想情况下，我希望背景图像淡入淡出，但 div 包含其他页面元素，因此我无法以任何方式更改不透明度。
Does anyone know of a good way to do this using jquery??
有谁知道使用 jquery 做到这一点的好方法？
Here's some code which fades out/in but fades out the contents of the div too.
这是一些淡出/淡入但也会淡出 div 内容的代码。
$("#slideshow").fadeOut(5000, function(){
$("#slideshow").css('background-image','url(myImage.jpg)');
$("#slideshow").fadeIn(5000);
});
回答by Gareth
HTML:
HTML：
<div class="slideshow"></div>
CSS:
CSS：
.slideshow
{
position: relative;
width: 350px;
height: 150px;
}
.slideshow img
{
position: absolute;
width: 350px;
height: 150px;
z-index:-1;
}
jQuery
jQuery
var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;
doSlideshow();
function doSlideshow()
{
if($('.slideshowimage').length!=0)
{
$('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
}
else
{
slideshowFadeIn();
}
}
function slideshowFadeIn()
{
$('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
if(nextimage>=images.length)
nextimage=0;
}
回答by Taty
How about adding a thumbs pagination list, to update the background image on click, and then, a second or two, and it starts fading in and out with the next bg img automatically?
添加一个拇指分页列表，在单击时更新背景图像，然后一两秒钟，它会自动随着下一个 bg img 开始淡入淡出？
HTML:
HTML：
<div class="slideshow">
<h1>Text</h1>
<input type="button" value="Hello" />
</div>
<ul>
<li><a href="#"><img src="http://placehold.it/50x50"></a></li>
<li><a href="#"><img src="http://placehold.it/50x50/123456"></a></li>
<li><a href="#"><img src="http://placehold.it/50x50/dbca98"></a></li>
</ul>
CSS:
CSS：
.slideshow
{
position: relative;
width: 350px;
height: 150px;
}
.slideshow img
{
position: absolute;
width: 350px;
height: 150px;
z-index:-1;
}
ul {position: absolute; top: 125px; left: 75px;}
li {
float: left;
border: 1px solid #000;
margin: 15px;
}
Javascript:
Javascript：
var images=new Array('http://placehold.it/250x150','http://placehold.it/250x150/123456','http://placehold.it/250x150/dbca98');
var nextimage=0;
doSlideshow();
function doSlideshow()
{
if($('.slideshowimage').length!=0)
{
$('.slideshowimage').fadeOut(500,function(){slideshowFadeIn();$(this).remove()});
}
else
{
slideshowFadeIn();
}
}
function slideshowFadeIn()
{
$('.slideshow').prepend($('<img class="slideshowimage" src="'+images[nextimage++]+'" style="display:none">').fadeIn(500,function(){setTimeout(doSlideshow,1000);}));
if(nextimage>=images.length)
nextimage=0;
}
See it all together at http://jsfiddle.net/tatygrassini/R4ZHX/75/.
回答by Orbit
Instead of just changing the background image, you could first call
而不是仅仅改变背景图像，你可以先调用
fadeOut()
then change source, and then call
然后更改源，然后调用
fadeIn()
something like...
就像是...
$('#image').fadeOut(500, function() {
$(this).attr('src', 'new-image.png')
.load(function() {
$(this).fadeIn();
});
});
To use a variety of images, there are a number of solutions, but you could simply iterate through a list of them.
要使用各种图像，有多种解决方案，但您可以简单地遍历它们的列表。
回答by Jepser Bernardino
You can create an positioned absolutely and with a slider plugin change the images contained in the div. Otherwize you have to sprite the background. I achieved this with the Jquery Tools tabs plugin.
您可以创建绝对定位并使用滑块插件更改 div 中包含的图像。否则你必须对背景进行精灵。我使用Jquery 工具选项卡插件实现了这一点。
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow();
回答by Joshua
Here is a solution that not only addresses your problem, but will also solve some other problems as well. Create another DIV on your DOM as an overlay, and execute your fade functions on this DIV only. It will appear as though the content is fading in / out. This approach is also more performant, as you are only fading a single DIV instead of multiple elements. Here is an example:
这是一个解决方案，不仅可以解决您的问题，还可以解决其他一些问题。在您的 DOM 上创建另一个 DIV 作为覆盖，并仅在此 DIV 上执行淡入淡出功能。它看起来好像内容正在淡入/淡出。这种方法也更高效，因为您只淡化单个 DIV 而不是多个元素。下面是一个例子：
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
// Step 1: change your content underneath the hidden div
// Step 2: hide the overlay
$('#containeroverlay').fadeOut('normal');
})
Most importantly, this approach will work in IE6-8 without screwing up the font aliasing of elements you may have on the div.
最重要的是，这种方法将在 IE6-8 中工作，而不会弄乱您可能在 div 上的元素的字体别名。
