不能只用 display: none 切换，因为它会使元素脱离文档流，导致父容器重排、页面跳动，且无法实现滑动动画；淘宝轮播需用 transform: translate3d() 配合 js 状态管理实现丝滑过渡、无缝循环与交互同步。
直接用 display: none 切换图片最简单，但淘宝首页那种平滑过渡、暂停/恢复、小圆点同步、无缝循环的效果，必须靠 transform: translate3d() + 定时器控制 + 状态管理，纯 CSS 动画或 radio 伪类搞不定。
为什么不能只用 display 切换？
淘宝轮播要丝滑、不抖动、支持快速点击、鼠标悬停暂停——这些都要求：图片始终在文档流中占位，且切换时不能触发重排。而 display: none 会让元素完全脱离布局，每次切换都会导致父容器高度重算，页面“跳一下”。更关键的是，它无法实现左右滑入/滑出的位移动画效果。
- 淘宝实际用的是
transform: translate3d(-700px, 0, 0)移动整个ul容器，所有img始终可见、固定定位 - 必须给
.screen设固定宽高（如width: 520px; height: 280px;），并设overflow: hidden来裁剪超出部分 - 每张图宽度必须一致，且
ul总宽度 = 单图宽 × 图片数（无限循环时还要额外加首尾两张）
如何实现无缝循环？
淘宝首页轮播“最后一张切完回到第一张”没有闪动或回退感，靠的是“复制首尾图”+“瞬移重置”。不是靠 CSS 动画循环，而是 JS 在动画结束瞬间，把 transform 值暴力跳到对应位置，人眼无法察觉。
- HTML 中图片顺序写成：
<img src="3.jpg"><img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="1.jpg">（共 5 张，真实图仅 3 张） - 初始
translate3d设为-520px（即第二张图居中），用户看到的是第 1 张 - 切到第 5 张时，视觉上是第 1 张；此时立刻把
transform改为-520px，并去掉过渡动画（transition: none），再恢复过渡 - 这个“瞬移重置”必须在
transitionend回调里做，不能靠定时器硬等
导航按钮和小圆点怎么同步？
小圆点激活状态（class="active"）和当前显示图片必须严格对应索引，但要注意：视觉索引（用户看到的第 1/2/3 张）≠ DOM 索引（ul 里第 0/1/2/3/4 个 img）。中间三张才是真实图，首尾两张是“幽灵图”。
- 维护一个
currentIndex变量，范围是0 ~ 图片总数-1，但它只映射到“可视区域”的三张图 - 点击小圆点时，计算目标真实索引：
targetIndex = (clickedIndex + 1) % realImageCount（+1 是因为首张幽灵图占位） - 左右箭头点击后，更新
currentIndex并取模，再调用位移函数；同时用document.querySelectorAll('.dot li')找对应li，手动加/删active - 别用
querySelector查找带 index 的 class，容易错位；直接用数组索引操作 DOM 元素最稳
自动轮播必须带暂停逻辑，否则必崩
只写 setInterval(switchImage, 3000) 在真实页面中等于埋雷：用户鼠标悬停时还在切，点按钮后定时器没清，可能连续触发两次切换，transform 值错乱，图片直接消失。
- 定义全局变量
let carouselTimer = null - 每次启动前先
clearInterval(carouselTimer)，再carouselTimer = setInterval(...) -
mouseenter容器时clearInterval，mouseleave时重新启动 - 手动点击左右按钮或小圆点后，也要立即
clearInterval并重置定时器（否则刚切到第 2 张，0.5 秒后又切到第 3 张） - 别用
setTimeout递归模拟——清理困难，且多次快速点击易造成堆栈延迟累积
真正难的不是让图片动起来，而是让所有交互状态（定时器、索引、DOM 类名、transform 值、过渡开关）在任意时刻都自洽。少一个 clearInterval，或漏一次 transition: none，轮播就会卡死或错位——这种细节，调试时得盯着 DevTools 的 Elements 和 Console 一起看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
