jQuery中如何实现动画结束后重复执行图片轮播函数？

嘿，你的轮播动画重叠问题，核心是**setInterval的固定执行节奏和jQuery动画的异步性撞车了**——它不管当前的显示/隐藏动画完没完成，到点就会调用轮播函数，自然导致下一张图片提前冒出来。咱们换个思路，用jQuery动画的回调函数来控制流程，就能完美实现「当前图完全隐藏后立刻切下一张」的效果，还能顺畅保持0→1→2的循环逻辑。

修正后的完整代码 #

JavaScript部分 #

$(function() {
  const maxImgIndex = 2; // 图片最大索引（对应0、1、2三张图）
  let currentIndex = 0;

  function runSlider() {
    // 先把所有轮播图隐藏，避免残留显示问题
    $('.slider-img').hide();
    
    // 执行当前图片的完整动画流程：显示→停留→隐藏→切换下一张
    $('.img_' + currentIndex)
      .show(3000) // 3秒完成显示动画
      .delay(3000) // 显示后停留3秒
      .hide(2000, function() { // 2秒完成隐藏动画，动画结束后触发回调
        // 更新索引，循环回到0
        currentIndex = currentIndex >= maxImgIndex ? 0 : currentIndex + 1;
        // 启动下一轮动画
        runSlider();
      });
  }

  // 页面加载完成后启动轮播
  runSlider();
});

HTML部分 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider_cover">
  <img src="https://images.pexels.com/photos/6602/food-plate-woman-hand.jpg?auto=compress&cs=tinysrgb&h=350" style="display:none;" class="slider-img img_0" />
  <img src="https://images.pexels.com/photos/6602/food-plate-woman-hand.jpg?auto=compress&cs=tinysrgb&h=350" style="display:none;" class="slider-img img_1" />
  <img src="https://images.pexels.com/photos/6602/food-plate-woman-hand.jpg?auto=compress&cs=tinysrgb&h=350" style="display:none;" class="slider-img img_2" />
</div>

关键改进说明 #

• 抛弃setInterval，用回调串起流程：hide()方法的第二个参数是动画完成后的回调函数，我们在这里更新图片索引并递归调用轮播函数，确保每一轮「显示→停留→隐藏」的完整流程结束后，才启动下一张的动画，彻底解决重叠问题。
• 直观的循环逻辑：用currentIndex = currentIndex >= maxImgIndex ? 0 : currentIndex + 1实现0→1→2→0的循环，比取模写法更直观易懂，你也可以根据习惯换成currentIndex = (currentIndex + 1) % (maxImgIndex + 1)。
• 统一类名优化：给所有轮播图片加了slider-img类，方便一次性隐藏所有图片，避免之前可能存在的残留显示问题，让初始状态更干净。

这样修改后，轮播会严格按照你的预期执行：显示图片0→停留3秒→隐藏2秒→立刻显示图片1→重复流程，完全不会出现动画重叠的情况。

内容的提问来源于stack exchange，提问作者Juan Carlos Mariño Fernández