简单的 jQuery 淡入淡出图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14733484/
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
Simple jQuery fade in fade out image
提问by Jay Smoke
Is there any scripts I can use to create a slideshow where a picture fades out and another replaces it. I am using the list below to list the images. The scripts I see currently slides the images left and right but none fades in an out.
是否有任何脚本可以用来创建幻灯片，其中图片淡出并替换它。我正在使用下面的列表来列出图像。我目前看到的脚本会左右滑动图像，但没有淡入淡出。
<ul class="slideshow">
<li><img src="images/image1.gif" /></li>
<li><img src="images/image2.gif" /></li>
<li><img src="images/image3.gif" /></li>
<li><img src="images/image4.gif" /></li>
<li><img src="images/image5.gif" /></li>
<li><img src="images/image6.gif" /></li>
</ul>
回答by António Almeida
This was the simplest I could get, its a circular gallery, it starts over when it reaches the end.
这是我能得到的最简单的，它是一个圆形画廊，当它到达终点时它会重新开始。
Here is a fiddle: http://jsfiddle.net/KA4Zq/
这是一个小提琴：http: //jsfiddle.net/KA4Zq/
var count = 1;
setInterval(function() {
count = ($(".slideshow :nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
$(".slideshow :nth-child("+count+")").fadeIn();
}, 2000);
The only thing you should change is the 2000 value (2sec). If you add more images to the gallery you don't need to set any other variable, the script do everything by it self...
您唯一应该更改的是 2000 值（2 秒）。如果向图库添加更多图像，则无需设置任何其他变量，脚本会自行完成所有操作...
And to be event simpler, I changed your html too, there's no need to have a ul list, just a divwith images inside:
为了使事件更简单，我也更改了您的 html，不需要有一个ul list，只需要一个div里面有图像：
<div class="slideshow">
<img src="" />
<img src="" />
...
</div>
回答by Anton
Select all images inside ul li like this $('ul li img')then use .fadeIn()to make the images fade in.
像这样选择 ul li 中的所有图像，$('ul li img')然后用于.fadeIn()使图像淡入。
$('ul li img').fadeIn('slow');
To make a slideshow of it you can use intervaland :eq()
要制作它的幻灯片，您可以使用interval和:eq()
var cnt = 0;
setInterval(function(){
cnt ==7 ? cnt=0:cnt++
$('ul li img').fadeOut('');
$('ul li img:eq('+cnt+')').fadeIn(1000)
},1000);
回答by Jing
$("ul > img").fadeOut().fadeIn()
