從ALT或TITLE標記添加標題到jQuery幻燈片

Question

我正在使用一個簡單的小jQuery腳本來旋轉一些圖像。我想知道是否有辦法從圖像中獲取替代標題或標題標籤，並將該文本顯示在圖像下方的p或div標籤中。

這是我到目前爲止有：

的jQuery：

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

CSS

.fadein { position:relative; height:350px; } 
.fadein img { position:absolute; left:0; top:0; } 

HTML

<div class="fadein"> 
<img src="1.jpg" alt="This is Image One" /> 
<img src="1.jpg" alt="This is Image two" /> 
</div> 
<p>CAPTION GOES HERE</p> 

任何的改變字幕融入這個祕訣那是 由alt標籤餵食？

謝謝！

Answer 1

下面是做這件事：

$(function() { 
    $('.fadein img:gt(0)').hide(); 
    $('.fadein').next().text($('img:first').get(0).alt); 
    setInterval(function() { 
     $('.fadein :first-child').fadeOut(1000, function() { 
      $(this).closest('div').next().text(''); 
     }).next('img').fadeIn(1000, function() { 
      $(this).closest('div').next().text(this.alt); 
     }).end().appendTo('.fadein'); 
    }, 3500); 
});​ 

JS Fiddle demo。

編輯答案隨時更改上述使用選擇的緩存，以儘量減少對DOM的查詢：

$(function() { 
    var fadein = $('.fadein'); 
    fadein.find('img:gt(0)').hide(); 
    fadein.next().text(function() { 
     return fadein.find('img:first').attr('alt'); 
    }); 
    setInterval(function() { 
     fadein.find(':first-child').fadeOut(1000, function() { 
      fadein.next().text(''); 
     }).next('img').fadeIn(1000, function() { 
      fadein.next().text(this.alt); 
     }).end().appendTo(fadein); 
    }, 3500); 
});​ 

JS Fiddle demo。

Answer 2

也許是這樣的 - DEMO

$(function(){ 
    $('.fadein img:gt(0)').hide(); 
    $('p').text($("img:visible").prop("alt")); 

    setInterval(function() { 
     $('.fadein :first-child').fadeOut(1000) 
     .next('img').fadeIn(1000) 
     .end().appendTo('.fadein').end(); 
     $('p').text($("img:visible").prop("alt")); 
    }, 3500); 
});