最稳妥的轮播实现是 setInterval + display: none 切换，需用 querySelector/All 获取元素、检查 img.complete 防闪屏、clearInterval 清理定时器、overflow: hidden 限制溢出、统一图片宽度、CSS 写死 transition、设固定高度防跳动。
直接用 setInterval + display: none 切换最稳妥，不依赖框架、兼容性好、逻辑清晰，适合静态页或轻量需求。别一上来就套 Swiper 或 Bootstrap，先跑通基础逻辑再说。
用 document.querySelector 拿元素，别用 getElementsByClassName
常见错误是用 getElementsByClassName 返回类数组，后续遍历或索引访问容易出错（比如没有 forEach 方法）。必须用 querySelector 或 querySelectorAll 获取确定的 DOM 节点。
-
const carousel = document.querySelector('.carousel')—— 容器只一个，用querySelector -
const images = carousel.querySelectorAll('img')—— 多张图，用querySelectorAll得到 NodeList（支持forEach） - 别写
document.getElementsByClassName('slide')[0]，类型不稳定，调试时容易 undefined
切换前必须检查 img.complete，否则闪白屏
网络慢或图片未加载完成时直接设 display: block，会看到空白帧。尤其在首屏加载慢、用户快速刷新页面时高频出现。
- 每次切换前加判断：
if (!images[currentIndex].complete) return - 更稳的做法是：首次初始化时监听所有
img的load事件，等全部加载完再启动轮播 - 如果某张图加载失败（
onerror），建议 fallback 到下一张，避免卡死
定时器必须配 clearInterval 清理，且暴露暂停/恢复方法
只写 setInterval(switchImage, 3000) 是危险操作：鼠标悬停没停、手动点按钮后定时器还在跑、多个轮播共存时互相干扰。
立即学习“前端免费学习笔记（深入）”；
- 定义全局变量：
let carouselTimer = null - 每次启动前先
clearInterval(carouselTimer)，再赋新值 - 绑定
mouseenter/mouseleave控制暂停与恢复（注意移动端无 hover，可忽略） - 点击左右按钮或指示点后，调用
resetTimer()重置间隔，避免“刚切完第2张，0.5秒后又跳第3张”
用 transform: translateX() 做滑动时，父容器必须设 overflow: hidden
否则图片横向排列后会溢出容器，左右箭头看起来像失效了——其实只是图跑外面去了。
- 容器加
overflow: hidden，这是硬性前提 - 所有
img必须等宽（如统一设width: 100%或固定像素），否则translateX(-n * width)计算偏移会错位 - CSS 过渡写死在样式里：
transition: transform 0.3s ease-in-out；别用 JS 动态改style.transition，Safari 不认 - 移动端需补
touchstart/touchend，仅靠click在手机上完全不可用
最易被忽略的是：轮播容器高度不固定时，用 display: none 切换会触发重排，导致页面跳动。解决方案不是加动画，而是给容器设死高度（比如 height: 400px）或用 aspect-ratio 锁定宽高比。
