用 transform: translateX() 实现图片轮播可避免重排、支持过渡与弹性动画；需将图片横向排列于 flex 容器中，通过移动容器位置切换显示，配合 cubic-bezier(.25,.9,.45,.1) 和定时器精准控制。
用 transform: translateX() 替代 display 切换
直接改 display: none/block 会触发重排，没有过渡效果，也做不到“弹性”——所谓弹性，本质是 CSS transition 配合 transform 的缓动行为。必须把所有图片放在一个横向排列的容器里，靠移动容器位置来“露出”当前图。
常见错误是给每张 <img> 单独设 position: absolute 再切 opacity，这虽然能淡入淡出，但无法实现左右滑动+回弹感；而 translateX() 可以配合 cubic-bezier(.25,.9,.45,.1) 模拟物理惯性。
- 轮播容器（
.carousel-track）设display: flex，子项.carousel-item设flex-shrink: 0; width: 100% - 外层
.carousel必须设overflow: hidden，否则滑动时会看到多余图片 - 初始
transform: translateX(0)，切到第 2 张时设为translateX(-100%)，依此类推 - 务必加
transition: transform 0.4s cubic-bezier(.25,.9,.45,.1)—— 这个贝塞尔曲线就是“弹性”的来源
setInterval 启动前必须清掉旧定时器
用户点下“下一张”后如果定时器没停，0.8 秒后又自动切，会导致视觉错乱甚至索引越界。不能只写 setInterval(switchImage, 3000) 就完事。
- 声明全局变量：
let carouselTimer = null - 每次调用
startAutoPlay()前先执行clearInterval(carouselTimer) -
mouseenter时清除，mouseleave时重新startAutoPlay() - 手动切换图片后，也要立刻
clearInterval(carouselTimer); startAutoPlay();，避免残留任务堆积
左右箭头按钮必须用 <button type="button">
用 <a href="#"> 或无 type 的 <button> 会导致点击后页面跳到顶部，尤其在 JS 报错或未加载时完全不可用。
立即学习“前端免费学习笔记（深入）”；
- 明确写
<button type="button" class="prev-btn"></button>和<button type="button" class="next-btn"></button> - 禁用状态用
disabled属性（而非仅加opacity: 0.5），这样键盘用户 Tab 到它也不会触发 - 绑定事件时用
addEventListener('click', ...)，别用onclick=""行内写法，便于后续解绑 - 点击后立即更新
transform值，并同步重置定时器，否则用户快速连点两下，第二下可能被定时器覆盖
图片宽高不一致会破坏弹性滑动的节奏
当 .carousel-item 宽度因图片尺寸不同而浮动时，translateX(-100%) 实际偏移量会变，导致滑动距离忽长忽短，弹性动画看起来卡顿、抽搐。
- 所有图片必须统一宽高比，推荐用
width: 100%; height: 400px; object-fit: cover; - 不要依赖
img自身的width/height属性，它们不响应式，且会被 CSS 覆盖 - 容器高度必须固定（如
.carousel { height: 400px; }），否则overflow: hidden失效，滑动时看到撕裂 - 若需响应式，用媒体查询分段设置高度：
@media (max-width: 768px) { .carousel { height: 240px; } }
ease-in-out 就完事，关键在于位移值是否稳定、定时器是否干净、DOM 结构是否可控。最易被忽略的是：滑动逻辑和定时器重置必须耦合在同一个函数里，分开写就等于埋雷。 
