纯HTML+CSS+少量JS可实现轻量轮播，30行JS即可精准控制暂停、悬停、间隔等行为，避免动画无法交互、定时器泄漏、布局抖动等问题，推荐用classList.toggle管理active状态，统一goTo函数处理所有切换逻辑。
用纯 HTML + CSS + 少量 JavaScript 就能实现轻量、可维护的图片轮播，不需要引入任何第三方库。
为什么不用 carousel 组件或 jQuery 插件？
多数简单轮播场景（比如首页 3–5 张宣传图）根本不需要完整轮播组件的复杂逻辑。自己写 30 行 JS 不仅加载快、无兼容包袱，还能精准控制行为——比如点击暂停、鼠标悬停暂停、自动跳转间隔可配。
常见踩坑点：
• 直接复制网上“全自动 CSS 动画轮播”代码，结果 animation 无法响应用户交互（如点击下一张）
• 用 setInterval 切图但没清理定时器，切页后内存泄漏或重复触发
• 图片宽高不一致，导致容器反复重排，视觉跳动
document.querySelectorAll + classList.toggle 控制显隐
最稳的显隐方案是给当前图片加 active 类，CSS 控制 opacity: 1 和 z-index，其余为 opacity: 0。避免用 display: none，否则会破坏 CSS 过渡动画。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构建议用
<div class="slider"><img><img></div>，不用<ul><li>套嵌，减少样式干扰 - CSS 中给
.slider img统一设width: 100%; height: auto;，并确保父容器有固定高度（比如min-height: 400px），防止布局抖动 - JS 里用
querySelectorAll('.slider img')拿到所有图片，再用index % images.length实现循环，比手动判断边界更安全
如何让轮播响应用户操作？
自动播放只是基础，真正可用的轮播必须支持中断和干预。关键在定时器管理与事件解耦：
- 用
let timerId = setInterval(...)启动，并把timerId存为全局变量（或闭包内变量），后续可clearInterval(timerId) - 在
mouseover时暂停，mouseout时重启；注意不要在每次 hover 都新建定时器，否则旧的还在跑 - 左右箭头按钮绑定
click事件，调用同一套goTo(index)函数，而不是分别写“上一张”“下一张”逻辑，避免状态不同步 - 如果加了指示点（dots），点击 dot 也要调用
goTo(n)，且同步更新 active 状态 —— 所有入口统一走一个函数，不易出错
移动端滑动支持要不要加？
如果只支持桌面端，不用处理 touch 事件。但如果要兼容手机，别直接上 touchstart/touchend 手写滑动检测——太容易误触、难判断方向、还要防默认滚动。
更稳妥的做法：
• 用 touchstart 记录起始 X 坐标
• touchmove 中计算偏移，但只用于标记“用户正在拖拽”，不立即切换图片
• touchend 时看偏移是否超过阈值（比如 50px），再决定是切换还是回弹
• 切换后立刻 preventDefault() 防止页面滚动，但只对 slider 容器生效，不影响页面其他区域
这个逻辑看似多几行，但比强行复用鼠标事件或引入 hammer.js 更可控。真正上线前务必在真机测试 iOS Safari 的 touch 行为差异。
