从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); 
});