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

多分このようなもの - 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);
});
于 2012-09-04T17:02:02.443 に答える
1

これを行う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 に答える