带有淡入/淡出的简单 jQuery 幻灯片答案

【问题标题】：Simple jQuery Slideshow with fadein/fadeout带有淡入/淡出的简单 jQuery 幻灯片
【发布时间】：2012-12-09 20:23:44
【问题描述】：

我有这个非常简单的 jQuery 幻灯片：http://jsfiddle.net/6zA4B/

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：

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});

效果很好，我只想用 3 个 div 替换 3 个 img 标签（这样我就可以在图像下方添加标题）。如何修改脚本以实现这一目标？我试过这个，但可能我做错了什么......

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：

$(function(){
    $('.fadein p:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('p').fadeIn().end().appendTo('.fadein');}, 3000);
});

http://jsfiddle.net/S4SmM/1/:D

【问题讨论】：

请在问题中包含代码。
试试jquery.malsup.com/cycle

标签： jquery slideshow fadein

【解决方案1】：

使用以下代码：

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：

.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：

$.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/

【讨论】：

我必须选择，我将 Andrew 设置为正确答案，因为他解释了我的错误。也谢谢你，你的解决方案就像一个魅力！ ;))

【解决方案2】：

您的一个选择器有点偏离：

$('.fadein :first-child')

正在选择.fadein 下的所有第一个子元素。这包括 p 元素的第一个子元素，这是您尝试旋转到的图像。

您希望将:first-child 选择器限制为直接位于.fadein 下的元素。一种方法是使用child selector:

$('.fadein > :first-child')

示例： http://jsfiddle.net/S4SmM/4/

【讨论】：

感谢您的解释。 :)

【解决方案3】：

我喜欢 Andrew Whittaker 的回答，但更喜欢使用 Fadeout 回调来给它更多“动画”：

setInterval(function(){$('.fadein > :first-child').fadeOut(1000, function() {
    $(this).next('p').fadeIn(1000).end().appendTo('.fadein');   
})
}, 5000);

【讨论】：

【解决方案4】：

你也可以使用插件jquery-fade-slider

$(selector).fadeSlider()

Link to Github Repo

【讨论】：