带有淡入/淡出的简单 jQuery 幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14003964/
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 Slideshow with fadein/fadeout
提问by MultiformeIngegno
I have this really simple jQuery Slideshow: http://jsfiddle.net/6zA4B/
我有这个非常简单的 jQuery 幻灯片：http: //jsfiddle.net/6zA4B/
HTML:
HTML：
<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
JavaScript:
JavaScript：
?$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});?
It works perfectly, I just want to replace the 3 img tags with 3 divs (so I can include a caption below the images). How can I modify the script to achieve that? I tried with this but probably I'm doing something wrong...
它工作得很好，我只想用 3 个 div 替换 3 个 img 标签（所以我可以在图像下方包含一个标题）。如何修改脚本以实现这一目标？我试过这个，但可能我做错了什么......
HTML:
HTML：
<div class="fadein">
<p><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">image1</p>
<p><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">image2</p>
<p><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">image3</p>
</div>
JavaScript:
JavaScript：
$(function(){
$('.fadein p:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('p').fadeIn().end().appendTo('.fadein');}, 3000);
});?
回答by Andrew Whitaker
One of your selectors is slightly off:
您的选择器之一略有偏差：
$('.fadein :first-child')
Is selecting all elements that are first children underneath .fadein. This includes the first child of the pelements, which are the images you're trying to rotate to.
正在选择下面的第一个子元素的所有元素.fadein。这包括p元素的第一个子元素，即您尝试旋转到的图像。
You want to restrict the :first-childselector to elements directly under .fadein. One way would be to use the child selector:
您想将:first-child选择器限制为.fadein. 一种方法是使用子选择器：
$('.fadein > :first-child')
Example:http://jsfiddle.net/S4SmM/4/
回答by extramaster
Use the following code:
使用以下代码：
HTML:
HTML：
<div class="fadein">
<div><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"><p>image1</p></div>
<div><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"><p>image2</p></div>
<div><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"><p>image3</p></div>
</div>
?
CSS:
CSS：
.fadein { position:relative; height:332px; width:500px; }
.fadein div {position:absolute;text-align:center;height:100%;}
.fadein p { position:absolute; bottom:0;width:100%;color:white;background-color:rgba(0,0,0,0.6);height:1em;padding-bottom:10px;}?
JS:
JS：
$.fn.nextOrFirst = function(selector) {
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
}
$(function() {
$('.fadein div:eq(0)').addClass("active");
$('.fadein div:gt(0)').hide();
setInterval(function() {
$('.active:eq(0)').fadeOut().removeClass("active").nextOrFirst('div').addClass("active").fadeIn().end()
}, 3000);
});?
JsFiddle: http://jsfiddle.net/S4SmM/5/
JsFiddle：http: //jsfiddle.net/S4SmM/5/
回答by SiteKickr
I like Andrew Whittaker's answer, but prefer to use the Fadeout callback to give it a little more "animation":
我喜欢 Andrew Whittaker 的回答，但更喜欢使用 Fadeout 回调来给它更多的“动画”：
setInterval(function(){$('.fadein > :first-child').fadeOut(1000, function() {
$(this).next('p').fadeIn(1000).end().appendTo('.fadein');
})
}, 5000);
