0

我正在使用一个简单的小 jQuery 脚本来旋转一些图像。我想知道是否有一种方法可以从图像中获取 alt 或 title 标签，并让该文本出现在 ap 或 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 标签提供的任何提示？

谢谢！

4

2 回答 2

1

也许是这样的 -演示

$(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);
});
于 2012-09-04T17:02:02.443 回答
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 小提琴演示。

编辑答案以更改上述内容以使用选择器缓存，以最大限度地减少对 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 小提琴演示。

于 2012-09-04T17:02:17.387 回答