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

设置新的超时时，您无需再次检查是否存在下一个.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>

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

3 个答案: