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，暂停和恢复定时器（移动端可忽略）
导航按钮别用 @#@#@#@#@#@#@#@#@#@0，结果一点击页面跳到顶部；或用 <div onclick="...">，导致键盘焦点不可达、无障碍支持归零。
<p>正确做法：</p>
<ul>
<li>统一用 <code><button type="button"></button>，语义清晰、默认不提交、天然支持 disabled
data-index="0"、data-index="1"，JS 里直接取值，避免硬编码索引isPaused = true，并调用 resetTimer()，防止手动切完立刻被自动逻辑覆盖最易被忽略的是图片加载失败后的容器高度塌陷——本地测试全好，一上线某张图 404，整个轮播区域缩成一条线。解决方法很简单：给 .carousel 设死高度（如 height: 400px），并在每张 <img> 上写明 width 和 height 属性。这比等 onload 回调再重绘更稳，也更适合练手阶段快速验证逻辑。
