纯CSS可实现自动轮播与手动切换：用@keyframes控制父容器translateX位移，配合radio:checked实现无障碍手动切换；混合方案中JS仅最小干预暂停动画，图片需响应式优化防CLS。
用纯 CSS 实现自动轮播，不依赖 JS
能不用 JavaScript 就别用——尤其只是做基础轮播时。@keyframes + animation 完全够用，且更轻量、更易维护。关键在于把所有图片放进一个容器，用 inline-block 或 flex 横向排列，再用 animation 控制 transform: translateX() 位移。
常见错误是直接对 img 标签设动画，结果每张图都动；正确做法是对包裹所有图片的父容器（如 .carousel-track）做位移动画。
- 图片必须等宽，且容器
width设为单张图宽 × 图片数，否则位移计算会错位 - 动画时长建议 ≥ 3s，太快人眼跟不上；
animation-timing-function推荐ease-in-out，避免生硬跳变 - 若要支持暂停（比如 hover 停止），加
:hover { animation-play-state: paused; }即可
用 input[type="radio"] 实现手动切换控制
原生单选按钮 + :checked 伪类，是最简洁、无障碍友好、无 JS 的手动轮播方案。每张图对应一个 input，用 label 关联，点击即切换选中项，再通过兄弟选择器控制对应图片显示。
核心技巧在于：所有图片默认 display: none，只有当前选中的 input 后面紧邻的 img（或其包装容器）设为 display: block。
- HTML 结构顺序不能乱：
input必须在对应img之前，且中间不能插入其他非 label 元素 - 用
for和id绑定 label 与 input，比嵌套写法更清晰、更利于屏幕阅读器识别 - 若想加“指示点”，直接给每个
label加背景样式即可，无需额外 DOM
同时支持自动轮播 + 手动切换的混合方案
纯 CSS 自动轮播和 radio 手动切换可以共存，但需注意优先级冲突：用户手动切完，自动轮播不能立刻覆盖回去。解决方法是用 animation-play-state 配合 JS 最小干预——只监听 radio 的 change 事件，给轮播容器临时加个 class 暂停动画。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
这个“最小 JS”只做一件事：暂停动画 5 秒，之后自动恢复。不接管图片切换逻辑，所有显示逻辑仍由 CSS 控制。
- JS 只需监听
change，不要用click——避免重复触发 - 暂停时间设为略长于单次动画周期（比如动画 4s，暂停设 4.5s），防止刚切完就跳走
- 别试图用 JS 控制
translateX值——这会让 CSS 动画和 JS 状态脱节，容易卡死或错帧
响应式图片适配和性能注意事项
轮播组件在移动端常因图片尺寸失控导致布局崩塌或加载慢。关键不是“让图片缩放”，而是从源头控制资源加载和渲染行为。
- 所有
img必须带width和height属性（即使 CSS 覆盖），防止 CLS（累积布局偏移） - 用
sizes+srcset提供多分辨率图片，比如 - 首屏外的图片加
loading="lazy"，但注意：Chrome 对轮播中非首张图的 lazy 加载支持不稳定，建议首张图不加，其余加
轮播最难的不是动效，是让每张图在任意设备上都清晰、不抖动、不重绘。这些细节没处理好，再炫的动画也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
