javascript - 图像轮播脚本在最后一张图像后停止。需要重复

Question

我需要在显示最后一张图像后重复我的脚本。我如何才能重置脚本所做的事情然后让它再次播放？该脚本更改当前图像的 z-index。在最后一张图片之后，如何让脚本“重置”所有图片的 z-index 并从顶部重新运行？谢谢！

<script>
function cycleImages(){
  var $active = $('#carousel .active');
  var $next = ($('#carousel .active').next().length > 0) ? $('#carousel .active').next() : $('#carousel img:first');
  $next.css('z-index',2);//move the next image up the pile
  $active.fadeOut(1500,function(){//fade out the top image
  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
  $next.css('z-index',3).addClass('active');//make the next image the top one
  if ($('#carousel .active').next().length > 0) setTimeout('cycleImages()',1000);//check for a next image, and if one exists, call the function recursively
  });
}

$(document).ready(function(){
  // run every 7s
  setTimeout('cycleImages()', 1000);
})

</script>

Answer 1

设置新的 Timeout 时无需再次检查是否有下一个 .active 元素

只用

setTimeout('cycleImages()',1000);

代替

if ($('#carousel .active').next().length > 0) setTimeout('cycleImages()',1000);

Answer 2

简单的逻辑是通过将.length与图像总数（全长）进行比较来检查图像是否已到达末尾。如果是，则转到第一张图片，即

('#carousel .active').first()

并打电话

setTimeout('cycleImages()',1000);

快乐编码:)

Answer 3

您可以通过维护 z-index 的计数器来将活动元素发送回来，而不是将下一个元素放在前面，例如

<script>
var zCount = 0;
function cycleImages(){
  var $active = $('#carousel .active');
  var $next = ($('#carousel .active').next().length > 0) ? $('#carousel .active').next() : $('#carousel img:first');

  $active.fadeOut(1500, function(){//fade out the top image
    $active.css('z-index', --zCount).show().removeClass('active'); //send the active image at the bottom of all images and unhide the image
    $next.addClass('active'); //make the next image as active
    setTimeout('cycleImages()',1000);
  });
}

$(document).ready(function(){
  setTimeout('cycleImages()', 1000);
})

</script>