原生html+css+js实现轮播图的核心是：用transform: translatex()替代left/margin-left以避免重排，配合setinterval定时切换并严格管理其生命周期，所有轮播项设position: absolute层叠，容器overflow: hidden，指示器与按钮通过索引映射绑定，兼顾ie11+兼容性与性能。
setInterval 生命周期、避免 DOM 重排、统一用 transform 做位移、所有轮播项设 position: absolute 层叠**。这样在 IE11+ 到 Chrome/Firefox/Safari 最新版都能稳住。
为什么用 transform 而不是 left 或 margin-left
因为 left 和 margin-left 触发 layout（重排），动画卡顿明显，尤其在低端安卓机或旧版 Safari 上；transform: translateX() 由 GPU 加速，兼容性好且性能高。IE11 支持 transform，但不支持 transform: translateX(50%) 中的百分比单位——所以必须用像素值或 calc() 配合 JS 动态计算。
- 轮播容器需设
overflow: hidden，否则位移后能看到“拖影” - 每个
.carousel-item必须设position: absolute; top: 0; left: 0; width: 100%; height: 100%，否则层叠错位 - 不要用
display: none切换显隐——它会触发重排；改用opacity: 0+visibility: hidden组合，配合transition
setInterval 容易漏掉的清理逻辑
页面有多个轮播图、或用户切换 Tab 后再切回来，setInterval 极易残留多个实例，导致图片疯转、内存泄漏。关键不是“怎么启”，而是“怎么停”。
- 每个轮播必须独立维护自己的
slideInterval变量，不能全局共用 - 在
mouseenter时调clearInterval(slideInterval)，但别立刻startSlide()——要等mouseleave再恢复，否则悬停瞬间就切下一张 - 监听
visibilitychange事件：document.addEventListener('visibilitychange', () => { if (document.hidden) clearInterval(slideInterval); else startSlide(); })
指示器（dots）和按钮的健壮绑定方式
靠 data-slide-to="2" 这类字符串属性跳转，看似方便，但容易因空格、大小写或没渲染完就绑定而失效。更稳的做法是用索引映射。
- 生成 dots 时，用
for (let i = 0; i 循环创建，并把 <code>i存进dot.dataset.index = i - 点击 dot 时，直接取
parseInt(dot.dataset.index)，比getAttribute('data-slide-to')少一层类型转换风险 - 左右按钮不要只靠 class 名判断方向；给
.prev-btn设data-direction="-1"，.next-btn设data-direction="1"，JS 里统一读parseInt(btn.dataset.direction)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
