display: none 是最适合零基础练手的轮播显隐方案，因其彻底移除元素、不占位、无动画依赖；setInterval 需配 clearInterval 清理避免假死；导航按钮应统一用 button[type="button"] 并加 data-index；图片容器需设固定高度防加载失败塌陷。
display: none 切换是最适合零基础练手的起点，它不依赖 CSS 动画、不涉及 transform 位移计算、也不需要处理 flex 容器重排，只要能控制 DOM 元素显隐，轮播逻辑就跑通了。
为什么不用 opacity 或 visibility？
初学最容易卡在“图片没消失”或“页面跳动”上，根源常出在这两个属性：
-
opacity: 0看似隐藏，但元素仍占位、仍响应鼠标事件，且必须配transition才有动画——练手阶段多一个属性就多一个调试盲区 -
visibility: hidden同样占布局空间，如果轮播容器高度靠内容撑开，它会导致父容器高度塌陷或抖动 -
display: none是唯一真正“从渲染树中移除”的方式，切换干净、性能无负担、行为可预测
setInterval 必须配 clearInterval 清理
只写 setInterval(nextSlide, 3000) 是练手项目里最典型的假死诱因。现象是：点两次按钮后，图片开始狂切；鼠标悬停时还在切；切到第三张突然跳回第一张。
实操建议：
- 定义全局变量
let carouselTimer = null - 每次启动前先执行
clearInterval(carouselTimer) - 在
nextSlide()和prevSlide()结束后调用resetTimer()（内部重新setInterval） - 给轮播容器绑定
mouseenter/mouseleave，暂停和恢复定时器（移动端可忽略）
导航按钮别用 <a> 或 <div>
新手常把指示点写成 <a href="#">1</a>，结果一点击页面跳到顶部；或用 <div onclick="...">，导致键盘焦点不可达、无障碍支持归零。
立即学习“前端免费学习笔记（深入）”；
正确做法：
- 统一用
<button type="button">，语义清晰、默认不提交、天然支持disabled - 每个按钮加
data-index="0"、data-index="1"，JS 里直接取值，避免硬编码索引 - 点击后立即设
isPaused = true，并调用resetTimer()，防止手动切完立刻被自动逻辑覆盖
最易被忽略的是图片加载失败后的容器高度塌陷——本地测试全好，一上线某张图 404，整个轮播区域缩成一条线。解决方法很简单：给 .carousel 设死高度（如 height: 400px），并在每张 <img> 上写明 width 和 height 属性。这比等 onload 回调再重绘更稳，也更适合练手阶段快速验证逻辑。
