原生轮播图核心是精准切换与状态同步：统一用display:none控制显隐，定时器需clearInterval防堆积，按钮索引须parseInt转数字并重置定时器，触摸滑动需preventDefault且设位移阈值，手动操作时自动轮播须立即让位。
直接上手就能跑的轮播图，不需要框架、不依赖 jQuery，用原生 HTML + CSS + JavaScript 就行。核心不是“怎么炫”，而是“切得准、停得住、不卡、不崩”。
用 display: none 切换最直白，但必须清空再设
初学最容易犯的错是：只给目标 <img> 加 style="display: block;"，忘了先把其他图设回 none。结果多张图同时显示、堆叠、撑开容器高度。
- 所有图片初始统一加
style="display: none;"，第一张手动设为block - 每次切换前，先遍历所有
img元素，全部设display: none - 再用索引（比如
slides[n]）设目标图为display: block，注意数组下标从 0 开始 - 别用
visibility: hidden或opacity: 0替代——前者占布局空间，后者仍响应点击且动画需额外transition
setInterval 必须配 clearInterval，否则定时器会越积越多
写一句 setInterval(next, 3000) 看似简单，实际一碰按钮或鼠标悬停就乱套：旧定时器没停，新定时器又起，图片自己狂切。
- 定义一个全局变量，如
let carouselTimer = null - 每次启动前先执行
clearInterval(carouselTimer)，再赋新值 - 用户点击按钮、
mouseenter轮播容器、touchstart时，都触发clearInterval -
mouseleave或touchend后，重新调用startTimer()，而不是直接setInterval
导航按钮的 data-index 必须和图片数组下标严格对齐
常见翻车现场：点第 3 个圆点，图片切到第 2 张；或者点完立刻自动切走——本质是索引没同步，或按钮事件没重置定时器。
立即学习“前端免费学习笔记（深入）”；
- 按钮写成
<button type="button" data-index="2">（注意：这是第 3 张，下标为 2） - JS 中取值用
parseInt(btn.dataset.index)，别漏掉parseInt，否则字符串 "2" 和数字 2 比较会出错 - 点击后不仅要调
showSlide(n)，还得立刻调resetTimer()，否则 0.5 秒后自动逻辑又接管 - 小圆点高亮状态要和
currentIndex在同一函数里更新，不要拆成两步异步操作
移动端滑动靠 touchstart/touchend，不是 mousemove
PC 上用鼠标拖拽能凑合，但手机上 mousemove 根本不触发。而且只算 clientX 差值不够，手指斜着划容易误判。
-
touchstart时记录startX = e.touches[0].clientX -
touchend时取endX = e.changedTouches[0].clientX，算差值diff = endX - startX - 只在
Math.abs(diff) > 50时才触发切换，避免抖动误触 - 务必在
touchmove中加e.preventDefault()，否则页面会跟着上下滚动
真正难的不是让图动起来，是让“动”和“不动”之间无缝衔接：手动切图那一刻，自动轮播得立刻让位；手指松开那一瞬，位移得刚好卡在整张图上；图片加载失败时，容器高度也不能塌。这些细节不处理，轮播图就只是个能闪的幻灯片。
