1

このコードを使用して、ページ上の画像を循環するページがあります。

$('#summaryContainer img:gt(0)').hide();
    setInterval(function(){
        $('#summaryContainer :first-child').fadeOut(summary.speed)
            .next('img').fadeIn(summary.speed)
            .end().appendTo('#summaryContainer');}, 
      summary.pause);

正常に動作します...ページを離れて戻ってくるまで。次に、サイクルが始まる前に最後の画像を点滅させてから、最初の画像に移動します。何が原因なのですか？

4

2 に答える 2

3

cssdisplayプロパティを設定してみてください。

#summaryContainer img {
    display: none;
}

次に、最初の行（cssで処理します）の代わりに、最初の画像をフェードインします。

$('#summaryContainer img:gt(0)').fadeIn();

これにより、すべての画像が非表示になり、最初の画像がスムーズにフェードインされます。

だから、私は全体が次のようになると思います：

 $('#summaryContainer img:gt(0)').fadeIn();
 setInterval(function(){
    $('#summaryContainer :first-child')
         .fadeOut(summary.speed)
         .next('img').fadeIn(summary.speed)
         .end().appendTo('#summaryContainer');}, 
 summary.pause);

さらに、そのcssルール。そんな感じ。

于 2012-09-07T19:15:36.773 に答える
0

jsBin デモ

.stop()と.fadeTo()との使用img:firstが鍵です

$('#summaryContainer img:gt(0)').hide();
setInterval(function(){
    $('#summaryContainer img:first').stop().fadeTo(summary.speed, 0)
        .next('img').fadeTo(summary.speed, 1)
        .end().appendTo('#summaryContainer');
},summary.pause);
于 2012-09-07T19:38:41.113 に答える