同一区域展示几帧并列、用户大概率逐帧看：商品主图、首页 Banner、活动预告、教程步骤预览。
界面与交互 · 内容与数据展示
轮播图Carousel
在同一展示区域按顺序切换一组并列帧的控件；当前帧、页码计数、当前圆点、箭头禁用态与自动播放暂停都要长在物件上，并尊重减少动效。
商品主图轮播：页码、当前圆点、箭头与已查看标记都长在物件上
亲手用前后箭头与圆点切帧、切循环/不循环看末尾箭头、开自动播放看悬停暂停，再点红色主操作把当前帧标为已查看——结果长在帧、圆点、页码和已查看标记上，不只靠底部说明。
第 0 步：这是商品详情的主图轮播。点「上一张 / 下一张」或圆点切帧，看墨色圆点、页码计数与当前帧一起移动；切「循环 / 不循环」看末尾箭头到头禁用；开「自动播放」后把鼠标移到帧上会暂停；最后点红色主操作「查看 当前商品 详情」把当前帧标为已查看——结果都长在物件上。
商品主图轮播春日出游 28L 轻量背包
第 1 / 4 张循环模式
自动播放间隔（阅读时间）
对照：当前第 1/4 张「春日出游 28L 轻量背包」，循环开、自动播放关——墨色实心圆点与页码 1/4 都长在物件上。原因：轮播必须随时让人知道现在第几张、共几张、怎么手动切换。下一步：点「下一张」或圆点切帧，切「循环 / 不循环」看末尾箭头，或开自动播放看悬停暂停。
面板教会的知识点
把刚才在轮播上看到的现象命名为六条规则。
- 当前帧 + 页码计数长在物件上：头部「第 N/M 张」计数、当前帧高亮、墨色实心圆点三处同步——随时知道自己在哪。
- 前后箭头按序切帧，到头要说清：不循环模式下到末尾「下一张」变禁用并写明原因；循环模式则回绕，箭头始终可用。
- 指示点是随机访问入口：圆点可直接跳到任意帧，不必逐帧走；当前页用墨色实心、其它空心加描边，形状而非颜色独撑。
- 循环 vs 不循环的末尾差异：循环把序列看成环，不循环尊重线性终点——选哪种取决于内容是否「回到开头」有意义。
- 自动播放可暂停：按钮可切停、鼠标移入或聚焦控件会暂停、减少动效下根本不开播——满足「用户始终能停」（WCAG 2.2.2）。
- a11y 语义齐全：外层 aria-roledescription=carousel、每帧 role=group + aria-label「第 N/M 张」、箭头与圆点有可达名称、键盘可切、减少动效关过渡。
什么时候用，和 tabs / list / image 怎么分
从「内容是否要逐帧按顺序看」判断，而不是看图多不多。
必须同时对照两组内容（→ tabs）；内容很长要精确跳读（→ list 加锚点）；只有 1 帧或纯装饰图（→ image）；线性流程步骤（→ steps）。
怎么用：从定帧到无障碍的最短路径
一次到位的检查顺序。
- 定帧数与顺序：默认 3–5 帧，按重要性或时间排；每帧只承载一个重点。
- 给前后箭头与指示点：箭头按序、圆点随机；当前态墨色实心、到头禁用并写原因，不只靠颜色。
- 当前页与计数长在物件上：页码 N/M、当前圆点、当前帧高亮三处同步——遮住底部说明仍知道位置。
- 自动播放默认关：必须开时给暂停按钮 + 悬停/聚焦暂停 + 减动效关过渡；间隔留足阅读时间。
- 给 a11y：aria-roledescription=carousel、每帧 role=group + aria-label「第 N/M 张」、键盘左右可切、prefers-reduced-motion 关过渡。
- 窄屏检查：箭头与圆点不挤、帧内容不截断、焦点与暂停状态可见。
同一商品主图轮播：正例与反例
目标都是展示 4 帧商品图。差别只在于页码、当前态、暂停与 a11y 是否守规则。
4 帧主图，头部「第 2/4 张」计数；当前圆点墨色实心、其它空心；不循环到末尾「下一张」禁用并写明；自动播放可暂停、悬停也停；外层 aria-roledescription=carousel，每帧 role=group + 「第 N/4 张」；键盘可切。
用户随时知道在第几张、能停、读屏同步。自动播放 1 秒一帧、没有暂停键；当前页只靠品牌色高亮、没有页码计数；到末尾「下一张」还能点但不响应；读屏只读出「图片」不知道第几张；窄屏箭头被挤没了。
用户跟不上、不知道在第几张、停不下来。快速自测
商品详情 5 帧主图，运营要开自动播放，且有用户开启了系统减少动效。最稳的做法是？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。