应使用 div 模拟进度条而非 progress 标签，因其支持点击跳转、平滑动画、IE/旧 Safari 兼容及完全可控；progress 标签受限多，仅反映页码、iOS 动画卡顿、IE9 不支持、无法点击且样式难定制。
progress 标签不能直接“绑定”轮播状态，必须手动同步索引和 value；用 div 模拟进度条更稳妥，尤其需要点击跳转、动画平滑或兼容 IE/旧 Safari 时。
用 progress 标签加进度条要设 max 和 value，且注意 iOS 动画跳变
原生 progress 最简但限制多：它只反映「当前页码」，不体现「剩余时间」。比如 4 张图，得写 <progress max="3" value="0">（索引从 0 开始）。每次切换必须显式赋值：progressEl.value = currentIndex。
iOS Safari 对 value 的连续小步更新不触发平滑动画，容易卡顿或直接跳到目标值；IE10+ 才支持，IE9 及更早版本完全不渲染。
- 必须设
max，否则显示为不确定状态（indeterminate） - 用 CSS 重置
::-webkit-progress-bar和::-webkit-progress-value才能改颜色/圆角 - 无法点击跳转，也不响应
pointer-events控制（原生行为锁定）
用 div 模拟进度条才能真正可控
推荐结构：<div class="bar-holder"><div class="bar"></div></div>。核心是控制 .bar 的 width 或 transform: scaleX()。
立即学习“前端免费学习笔记（深入）”；
计算公式固定：width = (currentIndex / totalSlides) * 100 + '%'。若要支持点击某段进度跳转，就给每个可点区域加 data-index，绑定事件后调用统一的 goToSlide(index)。
- 用
transform: scaleX()替代width可启用 GPU 加速，动画更顺 - 自动轮播暂停时，加
pointer-events: none防止用户误触 - 需监听
visibilitychange，页面切到后台时清除计时器，回来时重置或补帧
所有切换动作必须走同一个 goToSlide 函数
常见错误是把进度更新逻辑分散在 setInterval、箭头点击、点控点击、键盘事件里——结果就是进度条不同步、跳帧、卡死。正确做法是封装一个中心函数：
function goToSlide(index) { currentIndex = index % totalSlides; updateProgressBar(currentIndex); resetAutoPlayTimer(); }
-
updateProgressBar负责刷新progress.value或.bar.style.width - 自动轮播别用
setInterval，改用链式setTimeout，方便取消和重置 - 每次调用
goToSlide后，都要重置进度动画起始值和持续时间（例如从 25% → 50%，耗时 4000ms）
平滑动画别靠 JS 算帧，优先用 CSS transition
只要进度条是线性填充（比如每张图固定 4s），就不用自己写插值循环。CSS 的 transition: width 0.1s linear 足够顺滑，且性能远优于 JS 定时器驱动。
示例：.bar { width: 0%; transition: width 4000ms linear; }，然后 JS 只需执行 .bar.style.width = '25%'，浏览器自动完成过渡。
- transition 兼容 IE10+，无需 polyfill
- 避免在动画中频繁读取
offsetWidth，会强制同步回流 - 如果需要“倒计时式”填充（从 100% → 0%），用
scaleX更直观，且不影响布局流
实际最难的部分不是写代码，而是确保所有入口（自动、点击、键盘、页面可见性变化）都经过同一套状态更新路径——漏掉任意一个，进度条就会“失联”。
