簡單的jQuery幻燈片有淡入/淡出

Question

我有這個很簡單的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); 
});​ 

---

它的工作原理完美，我j ust想用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

Answer 1

一個你選擇的是微客：

$('.fadein :first-child') 

正在選擇.fadein之下的第一個孩子的所有元素。這包括p元素的第一個孩子，這是您要旋轉到的圖像。

您想限制:first-child選擇器直接在.fadein下的元素。一種方法是使用child selector：

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

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

Answer 2

使用以下代碼：

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/

Answer 3

我喜歡安德魯·惠特克的答案，但更喜歡使用淡出回調給它多一點的「動畫」：

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

Answer 4

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

$(selector).fadeSlider() 

Link to Github Repo