轮播图进度条本质是同步索引与UI状态，需手动维护currentIndex并驱动progress或div元素；推荐用progress标签（需设max和value）或div模拟（支持点击、定制、兼容性更好），所有切换操作必须统一走goToSlide函数以确保三者严格耦合。
轮播图进度条本质是同步索引与 UI 状态
HTML 轮播图加进度条，不是靠某个现成属性“一键开启”，而是手动维护当前页码（ 原生 当需要点击跳转、悬停提示、渐变色或适配老浏览器时，用 常见错误是把进度条更新逻辑塞进 立即学习“前端免费学习笔记（深入）”； 进度条本身不难，难的是它和轮播状态之间那根“线”不能断。只要索引更新、DOM 更新、定时器控制三者严格耦合，再加一点对用户交互的防御，它就能稳稳跟着图片走。currentIndex），再用这个值驱动一个视觉元素（比如 、
progress 元素最轻量，但兼容性需留意 标签语义清晰、体积小，适合简单场景。但它默认不可点击，且 IE10+ 才支持；iOS Safari 对 value 动态更新的动画不友好，可能跳变。
max 属性（如 max="3" 表示 4 张图，索引 0–3）value 属性：progressEl.value = currentIndex
::-webkit-progress-bar 和 ::-webkit-progress-value 伪元素
用
div 模拟进度条更可控 更稳妥。核心是控制 .progress-fill 的 width 百分比。
width = (currentIndex / totalSlides) * 100 + '%'
transform: scaleX() 替代 width 可获得 GPU 加速，动画更顺滑
pointer-events: none 防误触自动轮播下进度条容易卡顿或不同步
setInterval 回调里，却没处理异步延迟、用户手动切换、页面失焦等干扰。结果就是进度条跑得比图片快，或卡在某处不动。
goToSlide(index)
setTimeout 链式调用，比 setInterval 更易取消和重置visibilitychange 事件，在页面隐藏时暂停计时器，显示时补帧或重置transitionend 中更新进度条 —— 图片动画未结束时，currentIndex 可能已变，但 DOM 还没到位
