最简轮播图需用 currentindex = (currentindex + 1) % images.length 防越界，dom 加载后初始化，优先 transform + transition 实现切换，定时器用 autoplaytimer 统一管理并及时清理，确保显示状态、定时器活性、用户交互三者同步。
用原生 HTML + CSS + JavaScript 实现最简轮播图
不需要框架，50 行以内就能跑起来。核心是控制 img 元素的显隐或位置，配合定时器触发切换。关键不是“怎么炫”，而是“怎么稳”——图片错位、卡顿、点击失效，90% 出在索引越界和事件绑定时机上。
轮播图常见错误：索引超出图片数组长度
典型表现：切换到最后一张后白屏，控制台报 Cannot read property 'src' of undefined。这是因为循环时没做取模或边界判断。
实操建议：
- 用
currentIndex = (currentIndex + 1) % images.length替代currentIndex++，自动回环 - 初始化时确保
currentIndex是合法数字（0或Math.min(0, images.length - 1)） - 如果手动设置图片列表，务必检查 DOM 是否加载完成——
document.querySelectorAll('img')在外执行会返回空 NodeList
CSS 切换方式选 opacity 还是 transform？
opacity 简单但有渲染残留（旧图未完全隐藏就显示新图），transform: translateX() 更干净，但需保证容器设 overflow: hidden，否则滑出部分可见。
实操建议：
- 优先用
transform+transition，性能更好，尤其在移动端 - 给轮播容器加
will-change: transform提前提示浏览器优化 - 避免同时用
opacity和transform做过渡，容易触发重排 - 示例关键 CSS：
`.carousel-inner { overflow: hidden; }<br>.carousel-item { display: inline-block; width: 100%; transition: transform 0.3s ease-in-out; }`
自动轮播停不下来？检查定时器清理逻辑
用户点击“下一张”后还在自动切，说明 setInterval 没被清除。更隐蔽的问题是：多次调用启动函数，生成多个定时器，内存泄漏+行为紊乱。
实操建议：
- 用变量存定时器 ID：
let autoPlayTimer = null - 每次启动前先
clearInterval(autoPlayTimer) - 鼠标悬停暂停轮播时，只
clearInterval，离开时再startAutoPlay()，不要重复 new 定时器 - 页面卸载前（如 SPA 路由跳转）记得
clearInterval，否则后台仍在运行
复杂点往往不在动画本身，而在状态同步——当前显示哪张图、定时器是否活跃、用户是否正在拖拽，这三个值必须时刻一致。漏掉一个，轮播就“不听使唤”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
