必须用 clearinterval 清理 setinterval，否则手动切换会引发多实例叠加导致闪退错位；全局单 timer 变量、防重入、transform 位移动态计算、overflow: hidden、css 动画与 js 轮播解耦、状态原子更新、touch 偏移阈值判断、图片尺寸预设防抖动。
setInterval 必须配 clearInterval，否则手动切换后自动轮播会“抢帧”或跳回第一张——这是最常翻车的点。
为什么不能只写 setInterval(switchImage, 3000)
定时器不清理，用户点一次“下一张”，switchImage 就多绑一个实例；连点三次，第四张图就会被连切三次，出现闪退、错位、索引错乱。真实场景中，mouseenter 暂停、按钮点击、指示点切换、触摸滑动结束，全都要先 clearInterval(timer) 再重设。
- 全局只维护一个
timer变量，别用闭包或局部变量存多个定时器 - 页面有多个轮播时，每个必须用独立变量（如
timer1、timer2），不能共用 - 在
switchImage函数开头加if (isTransitioning) return，防动画未结束就触发下一轮
transform: translateX() 比 left 或 margin-left 更稳
改 left 或 margin-left 会触发浏览器重排（reflow），尤其在低端设备上卡顿明显；transform 走 GPU 合成层，不触发布局计算。但前提是：位移值必须严格等于单张图宽度（含 gap）。
- 别硬写
translateX(-300px)，用slides[0].getBoundingClientRect().width动态读取 - 容器必须设
overflow: hidden，否则滑出部分会漏出来 -
transition: transform 0.4s ease的时长要和setInterval间隔解耦——自动轮播节奏归 JS 控，动画归 CSS，两者不能混为一谈
点击指示点或箭头时，状态必须原子更新
用户点第 2 个圆点，你得在同一函数里做完三件事：更新 currentIndex、设置新 translateX、高亮对应 .dot.active。拆成异步或分步更新，就会出现“图切过去了，小圆点还亮着上一个”的错位。
-
data-index值必须是字符串数字（如"2"），别用2或"第二张" - 移动端
touchend后，要判断偏移量：Math.abs(offset) > width * 0.3才执行切换，否则回弹 - 所有
touchmove中必须加e.preventDefault()，否则页面会跟着上下滚动
图片加载和 DOM 尺寸不稳定是隐藏陷阱
轮播容器高度随图片加载跳变，会导致页面抖动；display: none 切换虽简单，但若图片没加载完，getBoundingClientRect() 读到的宽高是 0，位移直接失效。
- 给
<img>显式写死width和height属性（如width="800" style="max-width:90%"），或用aspect-ratio配合object-fit - 轮播容器加固定
height，比如height: 450px，避免 display 切换引发重排 - 懒加载图片时，等
load事件后再初始化轮播逻辑，或用IntersectionObserver监听首屏加载完成
真正难的不是让图动起来，而是让动的过程不被用户感知——所有状态同步、所有定时器可控、所有尺寸可预期，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
