如何用按钮控制图片逐帧切换并自动隐藏前一张？-html教程-PHP中文网

本文介绍一种简洁可靠的 JavaScript 方案，通过维护当前显示索引、检测元素存在性，实现点击“Next”按钮时精准切换图片区域——自动隐藏上一张含图的 section，避免重叠，并在末尾禁用按钮。

本文介绍一种简洁可靠的 javascript 方案，通过维护当前显示索引、检测 `` 元素存在性，实现点击“next”按钮时精准切换图片区域——自动隐藏上一张含图的 section，避免重叠，并在末尾禁用按钮。

在开发视觉小说类网页应用时，常需按顺序展示角色立绘（如 sad → neutral → happy），同时确保任意时刻仅一张图片可见，防止图像层叠干扰叙事体验。核心难点不在于简单显隐，而在于智能识别图像容器、安全切换状态、并优雅终止流程。

以下为优化后的完整实现方案：

✅ 正确逻辑要点

使用 index 变量追踪当前待激活的 <section></section> 序号（初始为 1，跳过首段纯文本）；
每次点击时，先判断 当前项与前一项是否都包含 <img>：若是，则移除前一项的 .d-block 类，避免残留图像；
再为当前项添加 .d-block，使其显示；
最后递增 index 并检查是否存在下一项；若不存在，立即禁用按钮，提升用户体验。

? 完整可运行代码

<style>
  section {
    display: none;
  }
  .d-block {
    display: block;
  }
</style><section class="d-block">Horace</section><section>Ursa</section><section><img id="sad" src="/uploads/20260820/17871956906a86712a9e021.jpg" alt="Sad expression"></section><section><img id="neutral" src="https://www.shutterstock.com/image-photo/banana-bunch-five-600nw-1057197824.jpg?x-oss-process=image/resize,p_40" alt="Neutral expression"></section><section><img id="happy" src="https://t4.ftcdn.net/jpg/05/65/93/25/360_F_565932566_6bll77MbikvLen4pPoLVvlrqmvKTZ7Nw.jpg?x-oss-process=image/resize,p_40" alt="Happy expression"></section><section>Thus</section><button>Next</button>

<script>
document.addEventListener("DOMContentLoaded", () => {
  let index = 1; // 起始显示第2个section（索引1），跳过首段文本
  const button = document.querySelector('button');
  const sections = document.querySelectorAll('section');

  // 辅助函数：判断某section内是否存在img元素
  const hasImg = (i) => i >= 0 && i < sections.length && sections[i].querySelector('img') !== null;

  button.addEventListener('click', () => {
    // 若当前section存在，且前一个也存在图片 → 隐藏前一个
    if (hasImg(index) && hasImg(index - 1)) {
      sections[index - 1].classList.remove('d-block');
    }

    // 显示当前section
    sections[index].classList.add('d-block');

    // 尝试推进到下一个section
    index++;
    if (index >= sections.length) {
      button.disabled = true;
      button.textContent = "End";
    }
  });
});
</script>

⚠️ 注意事项与最佳实践

语义化与可访问性：为每张图片添加 alt 属性，保障无障碍阅读；
CSS 优先级：.d-block 类的 display: block 必须能覆盖默认 section { display: none }，建议将样式置于或确保加载顺序；
索引边界防护：hasImg() 函数中已加入 i >= 0 && i 判断，避免越界错误；
扩展性提示：如需支持“上一页”或循环播放，只需增加 index-- 逻辑及重置条件即可；
性能友好：全程使用原生 DOM API，无外部依赖，轻量高效。