商品主图轮播需HTML+CSS+JS协同实现，语义容器用，图片alt须具体，切换前校验img.complete，位移动画优于显隐，移动端需touch事件，首屏外轮播应懒启动。
商品主图轮播不能只靠 HTML 实现，它必须由 HTML 结构 + CSS 定位 + JavaScript 控制三者协同完成；纯 HTML 标签本身不具备“切换”“自动播放”“响应交互”的能力，强行只写 <img alt="怎么用HTML制作商品详情页的主图轮播效果" > 堆叠，结果就是静态图列，不是轮播。
轮播容器必须用 <section></section> 包裹并设 role="region"
语义上，主图轮播是“一组相关图片的集合”，不是幻灯片播放器。用 <div> 或 <code><figure></figure> 都不够准确。<section></section> 是最贴切的语义容器，再加 role="region" 和 aria-label="商品主图轮播"，才能让屏幕阅读器识别出这是一个可操作、有状态的独立区域。
关键点：
-
<section></section>外层必须设tabindex="0"，否则键盘用户无法聚焦到轮播区，也就无法用空格/Enter 触发暂停或切换 - 内部所有
<img alt="怎么用HTML制作商品详情页的主图轮播效果" >的alt必须具体，例如alt="iPhone 15 Pro 钛金属蓝色正面图，无配件"，不能写"商品图1" - 避免用
<ul><li></ul>套图——虽然常见，但语义上它是“列表”，不是“图像集合”，对 SEO 和无障碍支持反而弱于<section></section>
setInterval 切换前必须检查 img.complete
直接改 src 或显隐状态是最易上手的 JS 方案，但网络慢时容易闪白屏或卡在空白帧。核心防护是每次切换前判断当前要显示的图片是否已加载完成。
立即学习“前端免费学习笔记（深入）”；
实操建议：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
document.querySelectorAll('.carousel-item img')获取图片集合，别用getElementsByClassName返回的类数组，它不支持forEach - 切换函数里先写
if (!img.complete) return，跳过未加载完的帧 - 每次调用
setInterval前，必须用clearInterval(this.intervalId)清掉旧定时器，否则滚动页签再切回来，可能多个轮播同时跑 - 暴露
pause()和resume()方法，绑定到mouseenter/mouseleave，这是电商页基本体验
用 transform: translateX() 而非 display: none 切换
靠显隐切换（display: block/none）看似简单，但动画生硬、无法做滑动过渡、移动端手势支持几乎为零。真正可用的轮播必须用位移方案：把所有图片横排，靠移动父容器实现“滑动”效果。
容易踩的坑：
- 父容器（
.carousel-track）必须设overflow: hidden，否则图片溢出破坏布局 - 每张图宽度要严格一致，否则
translateX(-n * width)计算会偏移不准 -
transition必须写死在 CSS 里，例如transition: transform 0.3s ease-in-out；用 JS 动态改style.transition在 Safari 上常失效 - 移动端必须监听
touchstart/touchend，仅靠click或mouseenter在手机上完全不可用
首屏外轮播要用 IntersectionObserver 懒启动
页面含多个轮播（比如详情页+推荐位），或主图轮播在折叠区下方，用 setInterval 从页面加载就跑，既浪费 CPU，又拖慢 LCP。正确做法是等轮播进入视口才启动。
关键控制逻辑：
- 创建
IntersectionObserver时传{ threshold: 0.1 }，表示 10% 进入视口就算可见 - 回调里只在
entry.isIntersecting === true时调用startCarousel()，为false时调用stopCarousel() - 每个轮播实例必须保存自己的
intervalId和observer引用，否则多个轮播互相干扰，停不掉 - 不要在回调里直接写轮播逻辑——必须节流，避免滚动中高频触发重复初始化
轮播最难的部分从来不是“怎么动起来”，而是“动得稳、停得准、读得懂、省得了”——img.complete 检查、IntersectionObserver 管控、tabindex="0" 聚焦支持，这三处漏掉任何一项，都可能让轮播在弱网、键盘、屏幕阅读器或后台标签页中彻底失能。
