2

以前にも同様の質問があったことは知っていますが、私はjQueryの新人であり、どのソリューションも機能しないようです。そのため、素朴なことはご容赦ください。非常に単純なスライドショーを作成しましたが、最後のスライドが表示されたときに、最初にループバックせず、単にフェードアウトします。どうすれば継続的にループさせることができますか？

$(document).ready(function(){
  $(".featured > div:gt(0)").hide();

  setInterval(function() {
    $('.featured > div:first')
    .fadeOut(2000)
    .next()
    .fadeIn(2000)
    .end()
    .replaceWith();
  }, 4000);

});
4

1 に答える 1

1

replaceWith()DOM要素が呼び出しているものを完全に削除するため、ループバックする必要はありません。

.appendTo('.featured')代わりに使用してみてください。これにより、最初の要素が最後に移動し、終わりのないループを続けることができます。

setInterval(function() {
    $('.featured > div:first')
        .fadeOut(2000)
        .next().fadeIn(2000).end()
        .appendTo('.featured');
}, 4000);

http://jsfiddle.net/JWc32/1/

アップデート：

ページレイアウトによっては、代わりにコールバックで実行することをお勧めします。これにより、が完了appendTo()するまで移動しません。fadeOut()

setInterval(function() {
    $('.featured > div:first').fadeOut(2000, function() {
        $(this).appendTo('.featured');
    }).next().fadeIn(2000);
}, 4000);

http://jsfiddle.net/JWc32/3/

于 2012-04-04T13:37:43.817 に答える