纯css轮播图虽可实现自动播放，但存在hover暂停不可靠、跳转卡顿、手势冲突、指示点不同步等问题；应改用transform+transition+显式状态管理，确保状态可控、过渡可中断、触发可感知。
交互动画丰富的轮播图，核心不在“炫技”，而在「状态可控 + 过渡可中断 + 触发可感知」——直接用 transform + transition + 显式状态管理，比依赖 CSS 动画或第三方库更稳、更易调试。
为什么不用纯 CSS @keyframes 做自动轮播
纯 CSS 轮播靠 @keyframes + animation-iteration-count: infinite 实现，但问题很实际：
- 无法在用户 hover 时暂停动画（
animation-play-state在部分 Safari 版本中对transform不可靠） - 点击按钮跳转某张图时，动画时间轴无法重置，容易卡顿或跳帧
- 移动端 touch 滑动和 CSS 动画冲突，手势拖拽后松手无法自然惯性滑动
- 指示点（dots）状态无法与动画帧同步，常出现“图已切，点没亮”
用 transform + transition 实现可中断滑动
关键不是“怎么动”，而是“动的时候能不能停、能不能改方向、能不能插队”。结构上用 flex 排列图片，容器设 overflow: hidden，靠 transform: translateX() 移动整个轨道。
- 每张图宽度必须一致，否则
translateX(-index * width)计算偏移会错位 -
transition必须写死在 CSS 里（如.carousel-track { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }），别用 JS 改style.transition，Safari 会忽略 - 切换前先清除当前过渡：给
.carousel-track加style.transform = 'none'，再设新值，避免多次快速点击导致过渡叠加 - 移动端需监听
touchstart/touchmove/touchend，计算位移并实时更新transform，松手后根据速度决定是否触发下一张
hover / click / touch 如何统一控制定时器
所有交互都得收口到同一个定时器变量，否则极易多线程打架。定义全局 let carouselTimer = null，所有启动/暂停都走它。
- 鼠标进入：调用
clearInterval(carouselTimer)，同时记录当前lastActiveTime = Date.now() - 鼠标离开：检查
Date.now() - lastActiveTime > 100（防抖），再carouselTimer = setInterval(...) - 点击按钮或点指示点：先
clearInterval(carouselTimer)，执行切换，再立即重启定时器（不要等 delay 后才恢复） - 手动切换后，重置计时起点，避免“刚切完第2张，0.8秒后又切第3张”的突兀感
图片加载失败时的动画兜底处理
网络慢或图片 404 时，img.complete === false，直接切图会导致空白帧。不能只靠 onload，得主动检查。
- 切换前遍历当前目标
img元素，用if (!img.complete || img.naturalWidth === 0)判断是否就绪 - 未就绪时跳过本次切换，并
setTimeout(() => trySwitch(), 100)重试，最多 3 次 - 为防无限等待，给容器加 loading 占位符（如
::before伪元素 + 骨架屏样式），不依赖 JS 插入 DOM - 慎用
IntersectionObserver做懒加载轮播——它只管“是否可见”，不管“是否加载完”，得配合img.decode()Promise 才能真正等图到位
最易被忽略的是：**transition 的 timing function 和图片宽高一致性必须提前锁定**。一旦上线后改了某张图尺寸或换了个缓动曲线，滑动就会突然变卡或错位，且很难复现。建议把 width、height 写死在 HTML 的 img 标签上，CSS 只负责布局，不参与尺寸计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
