如何让jQuery实现的图片轮播持续循环播放？

嘿，我懂你现在的困扰——手动给每张图片设置固定的延迟和淡入淡出动画，确实没法自动循环，因为当前代码是一次性执行完所有预设动作就结束了，没有后续触发回到首张的逻辑。咱们来调整一下代码，让它能无限循环播放～

问题根源 #

你当前的代码是给每个图片（.fadein1、.fadein2、.fadein3）单独指定了延迟和动画，整个流程是线性执行的：第一张淡出→第二张淡入再淡出→第三张淡入再淡出，之后就没有后续指令了，自然没法回到第一张重新开始。

优化方案：用递归函数实现无限循环 #

我们可以把轮播逻辑封装成一个递归函数，让它在每次完成一轮动画后自动触发下一轮，这样不管有多少张图片都能自动循环，而且代码更易维护。

// 初始化：隐藏除第一张外的所有图片
$('.fadein img:gt(0)').hide();

// 定义轮播核心函数
function runCarousel() {
  // 让当前显示的第一张图片淡出
  $('.fadein img:first').fadeOut(400, function() {
    // 淡出完成后，把这张图片移到轮播容器的最后
    $(this).appendTo('.fadein');
    // 让新的第一张图片（原第二张）淡入
    $('.fadein img:first').fadeIn(400);
  });
  // 10秒后触发下一轮轮播（和你原来的间隔保持一致）
  setTimeout(runCarousel, 10000);
}

// 启动轮播，第一次延迟10秒后开始（和你原代码的初始延迟匹配）
setTimeout(runCarousel, 10000);

代码解释 #

• 初始化：和你原来的代码一样，先隐藏除第一张外的所有图片。
• 递归轮播：runCarousel函数每次完成以下动作：
  1. 当前显示的图片淡出；
  2. 淡出完成后，把这张图片移到容器末尾（这样下一轮的第一张就是原来的第二张）；
  3. 新的第一张图片淡入；
  4. 10秒后自动调用自身，开启下一轮循环。
• 灵活性：这个方案不需要给每张图片加单独的class（比如.fadein1），以后新增图片也不用修改轮播逻辑，直接往.fadein容器里加图片就行。

如果你想保留原class的写法（可选） #

如果一定要用你原来的class命名，也可以修改代码让最后一张淡出后触发第一张的淡入，不过这种方式扩展性差，新增图片需要手动修改代码：

$('.fadein img:gt(0)').hide();

function loopCarousel() {
  $('.fadein .fadein1').delay(10000).fadeOut(400);
  $('.fadein .fadein2').delay(10000).fadeIn(400).delay(10000).fadeOut(400);
  $('.fadein .fadein3').delay(20000).fadeIn(400).delay(10000).fadeOut(400, function() {
    // 第三张淡出完成后，显示第一张，然后重新触发整个循环
    $('.fadein .fadein1').show();
    loopCarousel();
  });
}

loopCarousel();

不过还是更推荐第一种递归方案，代码更简洁，维护起来更省心～

内容的提问来源于stack exchange，提问作者Bradders