javascript - jQuery 幻灯片不会循环播放

Question

我知道以前有人问过类似的问题，但我对我的 jQuery 非常陌生，而且我似乎无法获得任何解决方案，所以请原谅我的天真。我创建了一个非常简单的幻灯片，但是当显示最后一张幻灯片时，它不会循环回到开头，它只是淡出。我怎样才能让它连续循环？

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

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

});

Answer 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/