如何实现图片序列自动播放前7张，滚动后播放剩余8-15张？

嘿，针对你要实现的分段图片自动播放需求，我调整了代码逻辑，完美实现前7张自动播放，剩下的第8至15张等用户滚动一次后再继续播放的效果。下面是完整的实现方案：

完整代码实现 #

HTML 部分 #

<div id="animation">
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
  <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>
<div class="d-none"> this div is appear </div>

CSS 部分 #

#animation img { display: none; }
#animation img:first-child { display: block; }
.d-none { display: none }
.d-block { display: block; }

JavaScript 部分 #

onload = function startAnimation() {
  const frames = document.getElementById("animation").children;
  const frameCount = frames.length;
  let currentFrame = 0;
  let interval;

  // 播放前7张图片的函数
  function playFirstSegment() {
    interval = setInterval(() => {
      frames[currentFrame].style.display = "none";
      currentFrame++;
      frames[currentFrame].style.display = "block";

      // 前7张播放完毕后暂停，等待用户滚动
      if (currentFrame === 6) { // 图片索引从0开始，第7张对应索引6
        clearInterval(interval);
        // 只监听一次滚动事件，避免重复触发
        window.addEventListener('scroll', playSecondSegment, { once: true });
      }
    }, 100);
  }

  // 播放第8至15张图片的函数
  function playSecondSegment() {
    interval = setInterval(() => {
      frames[currentFrame].style.display = "none";
      currentFrame++;
      frames[currentFrame].style.display = "block";

      // 所有图片播放完毕后停止动画，显示隐藏的div
      if (currentFrame === frameCount - 1) {
        clearInterval(interval);
        document.querySelector(".d-none").classList.add('d-block');
      }
    }, 100);
  }

  // 启动第一阶段的自动播放
  playFirstSegment();
}

核心逻辑说明 #

• 把动画拆成两个独立阶段：playFirstSegment() 负责前7张的自动播放，playSecondSegment() 负责剩余图片的播放
• 前7张播放完成后，自动清除定时器，并一次性监听窗口滚动事件（用{ once: true }确保只触发一次滚动响应）
• 用户滚动页面后，立刻触发第二阶段的播放，直到所有图片播放完毕，最后显示原本隐藏的div
• 用currentFrame统一跟踪当前播放的图片索引，避免原代码中多变量的混乱问题
• 改用const/let替代旧版的var，符合现代JavaScript编程规范

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