最直接的图片轮播方案是用 setInterval + querySelectorAll 控制显示/隐藏或 active 类，关键在稳定性：防定时器叠加、等图片加载完再启动、用户交互后及时清理定时器并禁用连点。
用 setInterval + querySelectorAll 控制图片切换最直接
不需要框架也能跑起来，核心就是定时修改当前显示的 <img> 或切换 active 类。关键不是“怎么动”，而是“怎么稳”：避免 setInterval 累积调用、图片未加载完就切换、用户手动切换后定时器没清理。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
let currentIndex = 0记位置，每次切换前先clearInterval(timer)再重设，防止多个定时器叠加 - 所有
<img>先统一设style="display: none"，只给当前项加style="display: block"，比靠 CSS 类更可控 - 在
window.addEventListener('load', ...)里启动轮播，确保图片资源就绪
overflow: hidden 和 transform: translateX() 搭配做横向滑动
如果想有左右滑入效果，CSS transition 配合 transform 是最轻量的方案，比用 left 或 margin 更流畅（触发 GPU 加速）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 外层容器必须设
overflow: hidden，否则滑动时会露底 - 图片容器用
display: flex，每张图设固定宽度（如width: 100vw），整体宽度为100vw * 图片数 - 切换时只改
transform: translateX(-${currentIndex * 100}vw)，别碰left或margin - 加
transition: transform 0.4s ease-in-out，但注意：首次加载时不要触发过渡（可初始设transition: none，第一次切换后再恢复）
点击小圆点或箭头时，event.preventDefault() 很可能被忽略
常见错误是给 <a href="#"> 做左右按钮，一点击页面就跳到顶部——因为默认行为没拦住。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 按钮优先用
<button type="button">，语义清晰且无默认跳转 - 如果非用
<a>，必须在 click 回调里写event.preventDefault() - 小圆点点击后，除了更新
currentIndex，要立刻调用一次切换函数，不能只依赖定时器下一次执行 - 点过一次后，建议加
pointer-events: none到按钮上，切换动画结束再恢复，防连点
移动端 touch 滑动需要监听 touchstart/touchend，但别自己算速度
真实场景中，用户手指一划可能只拖了 20px 就松手，这时候不该切图；只有位移够大（比如 >50px）才响应。自己算速度容易误判，不如专注位移阈值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只记
touchstart的clientX，在touchend读取最终clientX，差值绝对值 > 50 才执行切换 - 切换方向由差值正负决定：
startX - endX > 50→ 下一张，反之 → 上一张 - 切换后立刻重置
currentIndex并更新视图，别等定时器 - PC 端鼠标拖拽没必要模拟，
touch事件在桌面 Chrome 里默认不触发，别为兼容假触控加一堆 fallback
轮播逻辑本身不复杂，真正卡住人的往往是图片加载时机、用户中途交互打断、以及移动端 touch 事件的边界处理。这些地方一旦漏掉，就会出现白屏、跳图、卡死或者点不动。
