Question

我正在使用一个简单的小jQuery脚本来旋转一些图像。我想知道是否有办法从图像中获取alt或title标签，并将该文本显示在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

也许是这样的事情 - 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);
});

Answer 2

这是一种方法：

$(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

从ALT或TITLE标记添加标题到jQuery幻灯片

2 个答案: