如何在图片序列动画中按指定节点控制多div的显隐？

这个需求完全没问题，我们只需要在你的图片序列动画逻辑中，加入基于播放帧数的div显示/隐藏判断即可。下面是修改后的完整实现方案：

第一步：准备HTML结构 #

首先你需要有四个用于控制显示隐藏的div，这里假设它们的id分别为div1、div2、div3、div4，同时保留你的图片序列容器：

<!-- 控制显示的div -->
<div id="div1" style="display:block;">第一个div内容</div>
<div id="div2" style="display:none;">第二个div内容</div>
<div id="div3" style="display:none;">第三个div内容</div>
<div id="div4" style="display:none;">第四个div内容</div>

<!-- 图片序列容器 -->
<div id="animation">
  <img src="frame1.jpg" alt="帧1">
  <img src="frame2.jpg" alt="帧2">
  <!-- 这里依次添加到第15张图片 -->
  <img src="frame15.jpg" alt="帧15">
</div>

第二步：修改CSS（保留你的原有样式） #

#animation img { 
  display: none; 
}
#animation img:first-child {
  display: block; /* 初始显示第一张图片 */
}

第三步：修改JavaScript逻辑 #

我们在定时器的回调函数中，根据当前播放的帧数（通过j变量计数）来切换div的显示状态：

onload = function startAnimation() { 
  var frames = document.getElementById("animation").children; 
  var frameCount = frames.length; 
  var i = 0, j = 0; 
  // 获取四个控制div
  var div1 = document.getElementById("div1");
  var div2 = document.getElementById("div2");
  var div3 = document.getElementById("div3");
  var div4 = document.getElementById("div4");

  var interval = setInterval(function () { 
    // 隐藏当前帧，显示下一帧
    frames[i % frameCount].style.display = "none"; 
    frames[++i % frameCount].style.display = "block"; 
    j++; 

    // 根据帧数控制div显示隐藏
    switch(j) {
      case 4: // 播放到第5张图片（j从0开始计数，第5张对应j=4）
        div1.style.display = "none";
        div2.style.display = "block";
        break;
      case 6: // 播放到第7张图片
        div2.style.display = "none";
        div3.style.display = "block";
        break;
      case 14: // 播放到第15张图片，同时停止动画
        div3.style.display = "none";
        div4.style.display = "block";
        clearInterval(interval); 
        break;
    }
  },100); 
}

关键逻辑说明 #

• 初始状态下，我们设置div1默认显示，其他div隐藏，满足“序列启动时显示第一个div”的要求；
• 变量j是播放次数的计数器，从0开始递增：
  • 当j=4时，对应播放到第5张图片（因为初始显示第1张，每执行一次定时器切换到下一张），此时切换到div2；
  • 当j=6时，对应播放到第7张图片，切换到div3；
  • 当j=14时，对应播放到第15张图片，切换到div4并停止动画（和你原代码的停止逻辑保持一致）。

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