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/

jQuery幻灯片不会循环

1 个答案: