轮播图自动播放停不下来的根本原因是setinterval未被清除；指示器点击切换失败常因data-index为字符串却用==比较或闭包导致索引错位。
轮播图自动播放停不下来，用户点击后还在切图
根本原因是 setInterval 没被清除。很多实现直接在页面加载时启动定时器，但没监听用户交互（如点击左右箭头、指示器、鼠标悬停）来暂停或重置它。
实操建议：
- 用变量保存定时器 ID，比如
let autoPlayTimer = null - 每次手动切换前调用
clearInterval(autoPlayTimer) - 鼠标移入轮播区域时清除定时器，移出后重新启动（可选，需加防抖）
- 避免重复启动：每次调用
startAutoPlay()前先清一次旧的
指示器（dots）点击后图片没对应切换，或者索引错位
常见错误是把 data-index 写成字符串却用 == 比较，或循环绑定事件时闭包没处理好，导致所有点都指向最后一个索引。
实操建议：
- 给每个
dot元素设data-index="0"、data-index="1"等，并统一用parseInt(dot.dataset.index)转数字 - 用
forEach或for...of绑定事件，别用传统for (var i = 0; ...)+onclick=function(){goTo(i)} - 切换前校验索引范围：
if (index >= 0 && index ，防止越界
移动端滑动卡顿、手势不跟手
原生 touchstart/touchmove 处理不当会导致 300ms 延迟或 scroll 冲突，而且 CSS 动画未启用硬件加速，滚动帧率掉到 30fps 以下。
实操建议：
- 给轮播容器加
style="touch-action: pan-y;"，禁用横向滚动冲突 - 过渡动画用
transform: translateX()+transition: transform 0.3s ease，别用left或margin - 关键样式加上
will-change: transform或transform: translateZ(0)触发 GPU 加速 - 在
touchend后做滑动距离判断，别在touchmove中实时计算切换
图片加载完成前显示空白或布局塌陷
电商图通常体积大，img 标签没设宽高，浏览器无法预留空间，导致 DOM 渲染后重排，轮播容器突然跳动，甚至指示器错位。
实操建议：
- 所有轮播
img必须带width和height属性（即使响应式也填默认尺寸），或用aspect-ratio（注意兼容性） - 用
loading="lazy"仅对非首屏图启用懒加载；首屏第一张必须同步加载 - 为占位加一层背景色或骨架图：
background-color: #f5f5f5，避免白屏 - 监听
img.onload后再激活轮播逻辑，或用IntersectionObserver判断可见后再加载后续图
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
