最简轮播图核心是切换图片、自动播放、手动控制；用 setInterval + clearInterval 防泄漏，mouseenter/mouseleave 暂停恢复，querySelectorAll 获取元素，currentIndex 控制索引，CSS transition 实现过渡，aria-current 提升可访问性。
用 HTML + CSS + JavaScript 实现最简轮播图，不依赖框架
纯原生几行代码能跑起来的轮播图，核心就三件事：切换图片、自动播放、用户手动控制。别被“轮播图”三个字吓住，它本质只是让一组 <img> 按顺序显示，其余都是锦上添花。
关键判断：如果你只需要基础自动切换+左右箭头，50 行内完全够用；加缩略图或过渡动画会多 20–30 行，但逻辑不变。
setInterval 启动自动轮播，但必须配 clearInterval 防内存泄漏
常见错误是只写 setInterval，没在用户交互（比如点箭头）后清理旧定时器，导致多个定时器并发执行，图片狂闪或跳帧。
- 每次调用
nextSlide()前，先执行clearInterval(timer) -
timer = setInterval(nextSlide, 3000)放在初始化和用户操作结束时重置 - 鼠标悬停暂停轮播：给轮播容器加
mouseenter和mouseleave事件，暂停/恢复定时器
querySelectorAll 获取图片列表，用 currentIndex 控制索引，别用 innerHTML 拼接
用 innerHTML 动态插入图片不仅慢，还会清空已绑定的事件监听器（比如缩略图点击）。直接操作 DOM 元素更稳。
立即学习“前端免费学习笔记（深入）”；
- 用
const slides = document.querySelectorAll('.slide')提前获取所有图片容器 - 维护一个
let currentIndex = 0，切换时只改slides[currentIndex].classList.remove('active')和slides[nextIndex].classList.add('active') - 索引越界处理：用
nextIndex = (currentIndex + 1) % slides.length实现循环
transition 写在 CSS 里，JS 只负责切 class，避免强制同步布局
如果在 JS 里反复读取 offsetLeft 或 getBoundingClientRect()，再改样式，会触发浏览器重排（reflow），卡顿明显。
- CSS 中定义：
.slide { opacity: 0; transition: opacity 0.3s ease; }和.slide.active { opacity: 1; } - JS 只做一件事：切换
active类名 - 不要用
setTimeout模拟延迟过渡——CSStransition是硬件加速的，更顺滑
真正容易被忽略的是焦点管理：键盘用户按 Tab 进入轮播区后，左右箭头得支持 Enter 或 Space 触发，且当前图片要设 aria-current="true"。这点几行代码就能补上，但多数“几行搞定”的示例直接跳过。
