轮播图底层原理：卡片式与堆叠式状态机实现

1. 项目概述：为什么轮播图不是“写个定时器+切图片”就完事了？

轮播图，这个网页里最不起眼、却最常被低估的交互组件，几乎出现在 every single 电商首页、活动页、新闻聚合页、甚至后台管理系统的 Banner 区域。但你有没有发现，同样是“自动切换图片”，有的页面滑动顺滑如丝，卡片堆叠错落有致，点击任意一张能精准定位；有的却卡顿掉帧，切换时白屏一闪，堆叠顺序混乱，用户点第三张结果跳到了第五张——问题出在哪？不是图片太大，也不是网速慢，而是底层实现逻辑根本不在一个维度上。

今天这篇，不讲 jQuery 插件怎么调用，不贴现成的 Vue 组件代码，我们就用原生 JavaScript，从零开始，把“卡片式轮播图”和“堆叠式轮播图”这两类主流形态的底层原理彻底掰开、揉碎、摊在桌面上。你会看到：所谓“堆叠”，不是 CSS z-index 的简单叠加，而是基于 DOM 节点生命周期与 transform 层级关系的动态调度；所谓“卡片”，不是视觉上的层叠效果，而是用户操作意图与 DOM 索引映射关系的一次精密对齐。这背后涉及事件循环调度、CSS 渲染管线、DOM 重排重绘边界、以及最关键的——状态机建模能力。我带过 7 个前端团队，每次新人接手轮播图需求，90% 的 bug 都源于没搞清这三件事：当前可视区是哪几张？下一次切换要动哪几张？动的时候谁该进、谁该出、谁该保持静止？这篇文章就是帮你把这三件事变成可推演、可验证、可 debug 的代码逻辑。无论你是刚学完 DOM 操作的新手，还是写过三年 React 却总在动画细节上栽跟头的中级开发者，只要你需要亲手实现一个稳定、可维护、能通过性能审计的轮播图，它就值得你花 25 分钟读完。

2. 核心设计思路拆解：卡片式 vs 堆叠式，本质是两种状态机模型

2.1 卡片式轮播图：线性索引 + 可视窗口滑动模型

卡片式（Card-based Carousel）最典型的代表是 iOS 的 UIKit 中UIPageViewController或 Android 的ViewPager2，它的核心特征是：用户每次只能看到一张主卡片，左右两侧最多各露出半张作为“预览提示”。这种设计强调焦点集中，降低信息干扰，常见于产品介绍页、教程引导页、金融产品详情页。

它的底层模型非常清晰：一个长度为 N 的图片数组，一个当前激活索引currentIndex，一个固定宽度的可视容器（viewport）。所有 DOM 操作都围绕这个索引展开：

• 当前卡片：currentIndex对应的元素，transform: translateX(0)，z-index: 10
• 左侧预览卡：(currentIndex - 1 + N) % N对应的元素，transform: translateX(-30%)，z-index: 9
• 右侧预览卡：(currentIndex + 1) % N对应的元素，transform: translateX(30%)，z-index: 9
• 其余卡片：全部display: none或visibility: hidden

提示：这里用% N是为了实现环形索引，避免边界判断。但注意，-1 % 5在 JS 中等于-1，不是4，所以必须写成(currentIndex - 1 + N) % N才能正确回绕。

这个模型的优势在于逻辑极简、内存占用低（最多只渲染 3 张）、性能天花板高。但它有个致命软肋：无法支持“多张同时可见”的宽屏展示场景。比如你有一组 6 张高清产品图，希望在桌面端一次展示 3 张并支持横向滑动，卡片式模型就会崩——因为它的“可视窗口”是硬编码为 1 的。

2.2 堆叠式轮播图：层级栈 + 动态插入/移除模型

堆叠式（Stacked Carousel）则完全不同。它的灵感直接来自实体卡片堆叠：最上面一张是当前焦点，下面依次是上一张、上上张……视觉上形成纵深感，典型应用如 Pinterest 风格画廊、音乐 App 的专辑封面堆叠、或某些高端汽车官网的车型切换。

它的核心不是“索引偏移”，而是“层级栈管理”。我们维护一个 DOM 节点栈（stack），栈顶（top）永远是当前激活项：

// 初始状态：[card0, card1, card2, card3, card4] // 向右切换后：[card1, card2, card3, card4, card0] → card0 移到栈底 // 向左切换后：[card4, card0, card1, card2, card3] → card4 移到栈顶

但真实实现中，我们不会真的用Array.push/pop操作 DOM 节点（那会触发重排），而是用insertBefore和appendChild来物理移动节点位置，再配合transform: translateY()和z-index控制视觉层级。关键点在于：堆叠式轮播图的“堆叠深度”是可配置的，比如设置stackDepth = 3，就只让最近的 3 张卡片参与堆叠动画，更早的卡片统一归入“背景层”，用opacity: 0.3+transform: scale(0.85)模拟景深。

这就引出了两类模型的本质差异：

维度	卡片式	堆叠式
数据结构	线性数组 + 当前索引	动态 DOM 栈 + 深度阈值
渲染策略	按需显示 3 张，其余隐藏	全量渲染，按距离应用不同 transform/z-index
内存压力	极低（O(1)）	中等（O(N)，但可通过虚拟滚动优化）
动画复杂度	低（单属性位移）	高（多属性联动：translateY + scale + opacity + z-index）
适用场景	引导页、单图聚焦、移动端小屏	画廊展示、多图对比、强调视觉纵深感

2.3 为什么不能只用 CSS 实现？JavaScript 的不可替代性在哪？

很多人会问：CSS 有@keyframes、有transition、有will-change，为什么还要 JS？答案很现实：CSS 只能描述“如何动”，而 JS 决定“动什么”和“何时动”。

举个具体例子：当用户快速连续点击“下一张”按钮 5 次，理想行为是平滑过渡到第 5 张；但 CSS 动画队列如果没做节流，就会出现“动画跳帧”——中间几张一闪而过，甚至卡在半途。JS 的作用就是接管这个调度权：

• 监听点击事件，立即禁用按钮（防连点）
• 计算目标索引，判断是否已在动画中（用isAnimatingflag）
• 如果正在动画，将新请求暂存到队列（pendingQueue.push(targetIndex)）
• 动画结束回调（transitionend）中，取出队列首项执行，直到队列为空

这个“动画调度器”逻辑，CSS 根本无法表达。再比如“拖拽切换”：用户手指滑动时，要实时计算位移比例，动态更新transform: translateX()，松手后根据速度和剩余距离决定是回弹还是切换。这些都需要 JS 持续读取touchmove事件的clientX，并做毫秒级计算——CSS 是静态声明式的，做不到这种响应式控制。

所以，真正的轮播图核心，从来不是“怎么让图片动起来”，而是“怎么让动的过程完全受控、可预测、可中断、可恢复”。这才是 JavaScript 不可替代的价值所在。

3. 核心细节解析与实操要点：从 DOM 结构到 CSS 层级的完整链路

3.1 HTML 结构设计：语义化与可访问性的双重保障

轮播图不是炫技玩具，它是用户获取关键信息的第一入口。HTML 结构必须兼顾语义化与可访问性（a11y），否则再炫的动画也是空中楼阁。我坚持使用以下结构：

<div class="carousel" role="region" aria-label="产品展示轮播图"> <div class="carousel-track" aria-live="polite"> <div class="carousel-item" role="group" aria-roledescription="幻灯片"> <img src="product1.jpg" alt="iPhone 15 Pro 钛金属机身特写" loading="eager"> <div class="carousel-caption">Aerospace-grade titanium</div> </div> <div class="carousel-item" role="group" aria-roledescription="幻灯片"> <img src="product2.jpg" alt="iPhone 15 Pro 动态岛交互演示" loading="eager"> <div class="carousel-caption">Dynamic Island in action</div> </div> <!-- 更多 carousel-item --> </div> <button class="carousel-control prev" aria-label="上一张" type="button"> <span class="visually-hidden">上一张</span> </button> <button class="carousel-control next" aria-label="下一张" type="button"> <span class="visually-hidden">下一张</span> </button> <div class="carousel-indicators" role="tablist"> <button class="indicator" type="button" role="tab" aria-selected="true">.carousel-track { position: relative; width: 100%; height: 100%; overflow: hidden; } .carousel-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 关键：cubic-bezier 调整为“先快后慢”，模拟物理惯性 */ } /* 三张卡片的层级与位移 */ .carousel-item.active { transform: translateX(0); z-index: 10; } .carousel-item.prev { transform: translateX(-30%); z-index: 9; } .carousel-item.next { transform: translateX(30%); z-index: 9; }

这里有个极易踩的坑：z-index在position: absolute下才生效，但如果你给.carousel-track加了transform: translateZ(0)（常见 Hack 触发 GPU 加速），会导致其子元素的z-index计算上下文重置！解决方案是：要么不用translateZ(0)，要么给.carousel-item显式设置position: absolute并确保父容器没有创建新的 stacking context。

对于堆叠式，我们放弃z-index，改用transform: translateZ()构建真三维空间：

.carousel-stack { perspective: 1000px; /* 设置透视距离，越大纵深感越弱 */ } .carousel-stack .carousel-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* 堆叠层级：越靠前的卡片 Z 值越大 */ .carousel-item:nth-child(1) { transform: translateZ(0px) scale(0.95); } .carousel-item:nth-child(2) { transform: translateZ(-20px) scale(0.9); } .carousel-item:nth-child(3) { transform: translateZ(-40px) scale(0.85); } .carousel-item:nth-child(n+4) { opacity: 0.3; transform: translateZ(-60px) scale(0.8); }

translateZ()的妙处在于：它不依赖z-index，而是直接在 3D 空间中定位，且天然支持 CSS 动画。用户看到的“堆叠感”，其实是浏览器对perspective和translateZ的实时合成渲染。

3.3 JavaScript 状态管理：一个精简但鲁棒的状态机

轮播图的本质是一个有限状态机（FSM）。我定义了 5 个核心状态：

状态	触发条件	行为
IDLE	初始化完成，无动画	允许用户操作
ANIMATING	开始切换动画	禁用所有控制按钮，设置isAnimating = true
DRAGGING	用户开始触摸/鼠标按下	记录起始坐标，绑定mousemove/touchmove
DRAG_END	用户松开手指/鼠标	计算位移和速度，决定回弹或切换
PAUSED	用户手动暂停（如有暂停按钮）	清除自动播放定时器

状态流转图（文字描述）：IDLE→ (点击/触摸) →DRAGGING
DRAGGING→ (松手) →DRAG_END→ (位移 > 30px 或速度 > 0.3px/ms) →ANIMATING
ANIMATING→ (transitionend) →IDLE
IDLE→ (自动播放定时器触发) →ANIMATING

实现时，我用一个state变量 +setState()函数封装状态变更，并在每次变更时打印日志（开发期），上线后移除：

let state = 'IDLE'; const setState = (newState) => { console.log(`[Carousel] State change: ${state} → ${newState}`); state = newState; }; // 切换前校验 const goTo = (targetIndex) => { if (state !== 'IDLE') return; // 非空闲态直接拒绝 setState('ANIMATING'); // ... 执行动画逻辑 };

这个状态机看似简单，却是防止“用户狂点导致 DOM 错乱”的最后一道防线。很多线上轮播图 bug，根源就是状态管理缺失，多个异步操作（自动播放、用户点击、拖拽）互相覆盖。

4. 实操过程与核心环节实现：从初始化到拖拽的完整代码链

4.1 初始化：DOM 绑定、参数解析与默认状态设定

初始化函数initCarousel()是整个轮播图的“心脏起搏器”，它必须在 DOM 加载完成后立即执行，且只执行一次。我习惯把它放在DOMContentLoaded事件里：

document.addEventListener('DOMContentLoaded', () => { const carousels = document.querySelectorAll('.carousel'); carousels.forEach(carousel => { initCarousel(carousel); }); });

initCarousel()内部流程：

1. 参数提取：从>const options = { autoPlay: carousel.hasAttribute('data-autoplay'), interval: parseInt(carousel.getAttribute('data-interval') || '5000', 10), stackDepth: parseInt(carousel.getAttribute('data-stack-depth') || '3', 10), isCardStyle: carousel.classList.contains('carousel-card'), // 通过 class 判断类型 };

2. DOM 引用缓存：避免重复querySelector，提升性能

   const track = carousel.querySelector('.carousel-track'); const items = Array.from(track.querySelectorAll('.carousel-item')); const prevBtn = carousel.querySelector('.carousel-control.prev'); const nextBtn = carousel.querySelector('.carousel-control.next'); const indicators = carousel.querySelectorAll('.carousel-indicators .indicator');

3. 状态初始化：设置初始索引、方向、动画标志

   let currentIndex = 0; let direction = 1; // 1: next, -1: prev let isAnimating = false; let isDragging = false; let startX = 0; let currentX = 0;

4. 事件绑定：所有事件监听器在此统一注册，便于后续销毁

   prevBtn.addEventListener('click', () => goTo(currentIndex - 1)); nextBtn.addEventListener('click', () => goTo(currentIndex + 1)); indicators.forEach((ind, i) => { ind.addEventListener('click', () => goTo(i)); }); // 移动端触摸支持 track.addEventListener('touchstart', handleTouchStart, { passive: false }); track.addEventListener('touchmove', handleTouchMove, { passive: false }); track.addEventListener('touchend', handleTouchEnd); // PC 端鼠标支持（兼容性） track.addEventListener('mousedown', handleTouchStart); track.addEventListener('mousemove', handleTouchMove); track.addEventListener('mouseup', handleTouchEnd); track.addEventListener('mouseleave', handleTouchEnd);

实操心得：{ passive: false }是关键！默认touchstart是 passive 的，无法调用preventDefault()，导致touchmove无法阻止页面滚动。加了这个，才能实现“轮播图内拖拽不触发页面滚动”。

4.2 核心切换逻辑：goTo() 函数的完整实现与边界处理

goTo(targetIndex)是轮播图的“中枢神经”，它必须处理所有边界情况：越界、环形、动画冲突、状态同步。以下是经过 3 个大版本迭代的稳定实现：

const goTo = (targetIndex) => { // 1. 状态校验：非 IDLE 状态直接返回 if (state !== 'IDLE') return; // 2. 归一化索引：处理负数和超限 const itemCount = items.length; if (itemCount === 0) return; // 环形处理：-1 → itemCount-1, itemCount → 0 let normalizedIndex = ((targetIndex % itemCount) + itemCount) % itemCount; // 3. 快速路径：如果目标就是当前，直接返回（避免无谓动画） if (normalizedIndex === currentIndex) return; // 4. 计算方向：用于后续动画 class 切换和指示器高亮 direction = normalizedIndex > currentIndex ? 1 : -1; // 5. 更新状态 setState('ANIMATING'); currentIndex = normalizedIndex; isAnimating = true; // 6. 同步 UI：更新指示器选中状态 indicators.forEach((ind, i) => { ind.setAttribute('aria-selected', i === currentIndex); }); // 7. 根据轮播图类型执行不同渲染逻辑 if (options.isCardStyle) { renderCardStyle(); } else { renderStackStyle(); } // 8. 启动自动播放（如果启用） if (options.autoPlay) { startAutoPlay(); } };

其中renderCardStyle()的核心是批量更新carousel-item的 class：

const renderCardStyle = () => { // 清空所有 item 的状态 class items.forEach(item => { item.classList.remove('active', 'prev', 'next'); }); // 设置当前、前一张、后一张 items[currentIndex].classList.add('active'); items[(currentIndex - 1 + items.length) % items.length].classList.add('prev'); items[(currentIndex + 1) % items.length].classList.add('next'); };

而renderStackStyle()则更复杂，需要按距离动态分配 class：

const renderStackStyle = () => { items.forEach((item, i) => { item.classList.remove('stack-top', 'stack-middle', 'stack-bottom', 'stack-background'); const distance = Math.abs(i - currentIndex); if (distance === 0) { item.classList.add('stack-top'); } else if (distance === 1) { item.classList.add('stack-middle'); } else if (distance <= options.stackDepth) { item.classList.add('stack-bottom'); } else { item.classList.add('stack-background'); } }); };

注意：Math.abs(i - currentIndex)计算的是“环形距离”，即min(|i-j|, N-|i-j|)。但在堆叠式中，我们通常只关心“时间距离”（即上一张、上上张），所以直接用abs即可，无需环形最小化。

4.3 拖拽交互实现：从 touchstart 到 momentum 惯性滚动

拖拽是轮播图体验的分水岭。用户手指一划，就要有“跟手”的即时反馈，松手后要有符合物理直觉的惯性滑动。这需要三个阶段的精细控制：

阶段一：touchstart / mousedown —— 记录起点与禁用默认行为

const handleTouchStart = (e) => { if (state !== 'IDLE') return; setState('DRAGGING'); const touch = e.type === 'touchstart' ? e.touches[0] : e; startX = touch.clientX; currentX = 0; // 禁用默认行为：防止页面滚动或选中文本 e.preventDefault(); track.style.userSelect = 'none'; // PC 端防文本选择 };

阶段二：touchmove / mousemove —— 实时计算位移并应用 transform

const handleTouchMove = (e) => { if (state !== 'DRAGGING') return; const touch = e.type === 'touchmove' ? e.touches[0] : e; const deltaX = touch.clientX - startX; currentX = deltaX; // 应用实时位移：只动当前卡片，其他保持不动 items.forEach((item, i) => { if (i === currentIndex) { // 主卡片跟随手指 item.style.transform = `translateX(${deltaX}px)`; } else if (i === (currentIndex + direction + items.length) % items.length) { // 预览卡片按比例跟随（0.3 倍速） item.style.transform = `translateX(${deltaX * 0.3}px)`; } else { // 其他卡片保持原位 item.style.transform = 'translateX(0)'; } }); };

阶段三：touchend / mouseup —— 计算速度，决定回弹或切换

这是最难的部分。我们需要估算用户松手时的瞬时速度，来决定是“回弹到原位”还是“切换到下一张”。我采用“最后 100ms 的位移差”来估算速度：

let lastTime = 0; let lastX = 0; let velocity = 0; const handleTouchEnd = () => { if (state !== 'DRAGGING') return; setState('DRAG_END'); const now = Date.now(); const deltaTime = now - lastTime; if (deltaTime > 0 && deltaTime < 100) { velocity = (currentX - lastX) / deltaTime; // px/ms } else { velocity = 0; } lastTime = now; lastX = currentX; // 重置样式 track.style.userSelect = ''; items.forEach(item => { item.style.transform = ''; }); // 决策逻辑 const absX = Math.abs(currentX); const threshold = 50; // 像素阈值 const velocityThreshold = 0.3; // px/ms 阈值 if (absX > threshold || Math.abs(velocity) > velocityThreshold) { // 满足条件，执行切换 const targetIndex = currentX > 0 ? currentIndex - 1 : currentIndex + 1; goTo(targetIndex); } else { // 不满足，回弹 animateBackToOrigin(); } };

animateBackToOrigin()使用requestAnimationFrame实现缓动回弹：

const animateBackToOrigin = () => { const startTime = Date.now(); const duration = 300; // 回弹动画 300ms const startValue = currentX; const animate = () => { const elapsed = Date.now() - startTime; const progress = Math.min(elapsed / duration, 1); const easeProgress = 1 - Math.pow(1 - progress, 3); // cubic-out 缓动 const currentValue = startValue * (1 - easeProgress); items.forEach((item, i) => { if (i === currentIndex) { item.style.transform = `translateX(${currentValue}px)`; } }); if (progress < 1) { requestAnimationFrame(animate); } else { // 动画结束，清除样式 items.forEach(item => { item.style.transform = ''; }); setState('IDLE'); } }; requestAnimationFrame(animate); };

实操心得：cubic-out缓动（1 - (1-t)^3）比线性回弹更自然，模拟弹簧回弹的“先快后慢”。我测试过 12 种缓动函数，这个在移动端手感最佳。

5. 常见问题与排查技巧实录：那些只有亲手写过才会懂的坑

5.1 性能问题：动画卡顿、掉帧、内存泄漏

问题现象：轮播图在低端安卓机上严重卡顿，Chrome DevTools 的 Performance 面板显示 Layout 和 Paint 占比过高。

根因分析：90% 的卡顿源于错误的 CSS 属性触发重排。常见错误包括：

• 使用left/top替代transform: translateX/Y
• 在动画中修改width/height或margin
• z-index层级混乱导致浏览器频繁重建 stacking context

排查步骤：

1. 打开 Chrome DevTools → Rendering → 勾选 “Paint flashing” 和 “Layout Shift Regions”
2. 播放轮播图，观察哪些区域高频闪烁（Paint）或边框跳动（Layout）
3. 定位到对应 DOM 节点，检查 computed styles 中是否有layout或paint触发属性

解决方案：

• 强制 GPU 加速：给.carousel-track添加will-change: transform（仅在动画期间添加，动画结束移除，避免过度使用）
• 使用transform: translateZ(0)替代translateX（兼容老版 Safari）
• 对于堆叠式，用transform: translateZ()+opacity，彻底避开z-index

注意：will-change是双刃剑。我见过团队滥用它导致内存暴涨，最终方案是：只在state === 'ANIMATING'时动态添加style.willChange = 'transform'，动画结束立即设为''。

5.2 事件冲突：拖拽时页面跟着滚动、点击失效

问题现象：在手机上拖拽轮播图，页面也跟着上下滚动；或者点击指示器没反应。

根因分析：touchstart默认是 passive 的，无法调用preventDefault()；同时，touchmove事件未正确绑定passive: false。

排查步骤：

• 在handleTouchStart中加console.log(e.cancelable)，如果是false，说明事件不可取消
• 检查addEventListener是否漏了{ passive: false }

解决方案：

• 所有touchstart/touchmove监听器必须显式声明{ passive: false }
• 在handleTouchStart中立即调用e.preventDefault()，并确保e.cancelable === true
• PC 端兼容：mousedown也要e.preventDefault()，防止文本选中

5.3 状态错乱：点击多次后索引错位、指示器不同步

问题现象：用户快速连点“下一张”，最后停在第 7 张，但指示器高亮的是第 3 个。

根因分析：goTo()函数未做状态锁，多个异步调用并发修改currentIndex，且render*()函数未等待上一次 DOM 更新完成。

排查步骤：

• 在goTo()开头加console.log('goTo called with', targetIndex, 'current:', currentIndex)
• 在renderCardStyle()结尾加console.log('Rendered for', currentIndex)
• 观察日志是否出现“调用顺序与渲染顺序不一致”

解决方案：

• 引入isAnimating标志，goTo()开头强制校验if (isAnimating) return
• 使用Promise.resolve().then(() => {...})将render*()推迟到下一个 microtask，确保 DOM 更新队列清空
• 对于指示器同步，在render*()后统一更新，而不是在goTo()中提前更新

5.4 可访问性失效：屏幕阅读器无法播报、键盘导航失灵

问题现象：开启 VoiceOver，轮播图内容完全不朗读；Tab 键无法聚焦到指示器。

根因分析：aria-*属性未动态更新，或tabindex缺失。

排查步骤：

• 使用 Chrome 的 Accessibility 面板，检查.carousel-indicator是否有tabindex="0"和aria-selected
• 检查aria-live区域是否在切换时更新了textContent

解决方案：

• 指示器必须有tabindex="0"，且aria-selected随currentIndex动态更新
• aria-live="polite"区域内，每次切换后设置track.textContent = items[currentIndex].getAttribute('aria-label') || ''
• 为prevBtn/nextBtn添加tabindex="0"，并监听keydown支持Enter/Space触发

5.5 响应式断裂：PC 端正常，移动端堆叠错乱

问题现象：在 iPhone 上，堆叠式轮播图的卡片全部挤在左上角，translateZ失效。

根因分析：移动端 Safari 对perspective的解析有 Bug，且transform的px单位在高 DPR 屏幕下精度丢失。

排查步骤：

• 在 Safari 开发者工具中检查.carousel-stack的 computedperspective是否为none
• 检查transform的 computed value 是否为none

解决方案：

• perspective必须写在父容器（.carousel-stack），且值不能为0或auto
• 使用rem或%替代px：transform: translateZ(-2rem)比translateZ(-20px)更稳定
• 为.carousel-stack添加backface-visibility: hidden，强制硬件加速

---

我在实际项目中踩过的最大一个坑，是某次上线后收到大量用户投诉“轮播图点不动”。排查了 3 小时，最后发现是touchstart事件监听器绑在了.carousel-track上，但这个元素被一个position: fixed的悬浮广告遮挡了——广告层虽然透明，但pointer-events: auto依然拦截了触摸事件。解决方案很简单：给广告层加pointer-events: none，再给需要点击的按钮加pointer-events: auto。这件事让我彻底明白：轮播图不是孤立的组件，它是嵌在整个页面交互生态里的一个节点。写代码时，永远要问一句：“我的事件，真的能触达吗？”