本文介绍一种简洁可靠的 JavaScript 方案，通过维护当前显示索引、检测 元素存在性，实现点击“Next”按钮时精准切换图片区域——自动隐藏上一张含图的 section，避免重叠，并在末尾禁用按钮。
本文介绍一种简洁可靠的 javascript 方案，通过维护当前显示索引、检测 `` 元素存在性，实现点击“next”按钮时精准切换图片区域——自动隐藏上一张含图的 section，避免重叠，并在末尾禁用按钮。
在开发视觉小说类网页应用时，常需按顺序展示角色立绘（如 sad → neutral → happy），同时确保任意时刻仅一张图片可见，防止图像层叠干扰叙事体验。核心难点不在于简单显隐，而在于智能识别图像容器、安全切换状态、并优雅终止流程。
以下为优化后的完整实现方案：
✅ 正确逻辑要点
- 使用
index变量追踪当前待激活的<section></section>序号（初始为1，跳过首段纯文本）； - 每次点击时，先判断 当前项与前一项是否都包含
<img alt="如何用按钮控制图片逐帧切换并自动隐藏前一张？" >：若是，则移除前一项的.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" alt="Neutral expression"></section>
<section><img id="happy" src="https://t4.ftcdn.net/jpg/05/65/93/25/360_F_565932566_6bll77MbikvLen4pPoLVvlrqmvKTZ7Nw.jpg" 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，无外部依赖，轻量高效。
该方案摒弃了对 ID 的硬编码依赖和易错的 removeAttribute("d-block")（.d-block 是 class，非 attribute），转而采用标准的 classList 操作，结构清晰、健壮性强，非常适合视觉小说、交互式故事等场景的渐进式内容呈现。
