纯HTML无法实现轮播，需CSS定位+JS控制；display:none切换最适新手，避免重排与抖动；setInterval须配clearInterval清理与鼠标悬停暂停；transform方案需overflow:hidden、flex布局及动态宽度计算；图片未加载完成时应跳过切换并监听load事件。
纯 HTML 无法实现轮播效果，必须配合 CSS 定位 + JavaScript 控制逻辑。所谓“能动”，不等于“能稳”——很多初学者写完 setInterval 就以为完成了，结果一上线就遇到图片闪白、点击错位、定时器堆叠、移动端悬停失效等问题。
为什么 display: none 切换最适合作为起点
对新手或轻量需求场景，用 display: none / display: block 控制显隐是最直白、容错率最高的起点。它不依赖尺寸计算、不触发重排、不耦合 transform 动画时机，调试时一眼能看出哪张图被激活。
- 所有
<img>默认加style="display: none;"，只有一张设为display: block - 切换前先遍历清空所有
display: block，再设目标索引的图——顺序不能反 - 别用
visibility: hidden替代，它仍占布局空间，容易撑开容器高度导致抖动 - 指示点（dots）和图片索引严格同步：点第 2 个 dot → 显示第 2 张图 → 更新
currentIndex = 1（从 0 开始）
setInterval 自动播放必须配清理与重置
只写 setInterval(() => { next() }, 3000) 是典型隐患。用户点按钮后定时器还在跑，鼠标悬停未暂停，甚至页面切到后台还持续执行，极易导致状态错乱。
- 定义变量
let timerId = null，每次启动前先执行clearInterval(timerId) - 在
next()、prev()和点 dot 的回调末尾，都调用统一的resetTimer()函数 -
mouseenter时clearInterval(timerId)，mouseleave时重新setInterval，但注意保存原始间隔值，别每次都硬写3000 - 移动端无 hover，可跳过
mouseleave恢复逻辑，或改用focusin/focusout兼容触屏焦点
transform 位移比 display 切换更平滑，但有硬性前提
当需要性能优化或过渡动画时，应切换为 transform: translateX() 方案，但它不是“加个 transition 就行”，而是一整套 DOM 结构与样式约束。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
overflow: hidden，否则位移后图片会溢出可见区域 -
.carousel-track（包裹所有图片的 ul 或 div）需设display: flex或white-space: nowrap，子项加flex-shrink: 0 - 位移值严格按
-index * itemWidth计算，itemWidth建议用getBoundingClientRect().width动态获取，而非写死像素 -
transition必须写在 CSS 中（如.carousel-track { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }），JS 中改style.transition在 Safari 上可能失效
图片加载状态与轮播时机必须解耦
最容易被忽略的是：轮播逻辑执行了，但 <img> 还在 loading，结果看到白块或占位符。这不是 CSS 没写好，而是 JS 没等资源就位。
- 切换函数中加守卫：
if (!images[currentIndex].complete) return，跳过未加载完成的图片 - 监听
load事件，在所有图片加载完成后才启动自动轮播，避免首帧空白 - 若用
IntersectionObserver控制轮播启停，图片动态插入后需手动调用observer.observe(target)，它不自动响应 DOM 新增 - 慎用懒加载属性（如
loading="lazy"）——轮播图通常需首屏立即加载，否则complete一直为false
