用 setinterval + 原生 js 实现轮播需显式管理定时器、data-index 标记项、索引取模、opacity+transition 控制显隐、position:relative 容器、button 按钮语义化、data-playing 控制暂停、touch 事件处理防冲突。
用 setInterval + 原生 JS 控制轮播切换最直接
不用框架、不引入外部库，靠几行 JS 就能跑起来。核心是定时修改当前显示的 img 或 div 的 display 状态，或切换 class 触发 CSS 过渡。
常见错误是忘记清除旧定时器，导致多个 setInterval 同时运行，图片疯跳。如果用户手动点击了下一张，又没 clearInterval，就会叠加节奏。
- 用
let timer = setInterval(...)显式声明定时器变量，方便后续清除 - 每次切换前先
clearInterval(timer)，再重新赋值，避免堆叠 - 轮播项建议用
data-index标记序号，比靠 DOM 顺序取children[i]更可靠（比如中间加了注释节点就错位） - 切换逻辑里记得对索引取模：
currentIndex = (currentIndex + 1) % items.length，否则越界后会变undefined
CSS 用 opacity + transition 实现淡入淡出更稳
比起暴力改 display: none/block，用 opacity 配合 transition 能自然过渡，且不会触发重排（layout），性能更好。关键是所有轮播项必须初始都处于文档流中（不能 display: none），只靠 opacity: 0/1 控制显隐。
容易踩的坑是忘了加 position: relative 到轮播容器上，导致子元素用 position: absolute 时定位错乱；或者过渡时间写成 0.5s 却没写单位，浏览器直接忽略。
- 容器设
position: relative，每张图设position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.4s ease; - 当前激活项加
opacity: 1，其他保持opacity: 0 - 不要用
visibility: hidden替代opacity: 0，它不触发 transition
点击左右按钮时，event.preventDefault() 很少需要但别乱加
如果轮播按钮是 <a href="#"></a>，点击会默认跳到页面顶部，这时才需要 event.preventDefault()。但如果按钮是 <button></button> 或带 type="button" 的 <a></a>，完全不用管。
很多人习惯性一上来就写 e.preventDefault()，结果发现按钮点不动——其实是阻止了本不该被阻止的默认行为，比如表单提交或链接跳转被误杀。
- 优先用
<button type="button"></button>做控制按钮，语义清晰且零副作用 - 若必须用
<a></a>，确保href是#或javascript:void(0)，再加preventDefault - 轮播自动播放暂停功能，建议用
data-playing="true/false"控制状态，而不是依赖定时器变量是否为null
移动端要处理 touchstart/touchend 才算完整
只响应鼠标事件在手机上基本不可用。得监听 touchstart 记下起始 X 坐标，touchend 时算偏移量，大于阈值（比如 50px）就切图。注意别和 click 冲突：iOS Safari 会在 touch 后约 300ms 补一个 click，造成重复触发。
简单做法是 touch 开始时设 isDragging = true，在 click 处理函数开头加 if (isDragging) { isDragging = false; return; } 过滤掉伪 click。
- 记录
touchstart的e.touches[0].clientX，touchend时再取一次，差值决定方向 - 加个
touchmove事件监听并e.preventDefault()，防止页面跟着滑动（尤其在轮播图高度不够时） - 阈值别设太小，不然手抖就误触发；也别太大，否则体验迟钝
setInterval + opacity 版本，再按需叠加交互细节，比一开始堆功能更可控。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
