标签本身不支持轮播，它仅是响应式图像容器，无时间轴、切换逻辑或交互能力；实现轮播必须依赖javascript控制显隐或替换内容。
<picture></picture> 标签本身不支持轮播 —— 它只是响应式图像的容器，用于根据设备条件（如屏幕宽度、像素密度、格式支持）选择一个 <source></source> 或回退到 <img>，没有时间轴、切换逻辑或交互能力。想实现轮播，必须配合 JavaScript 控制显隐或替换内容。
为什么不能只靠 <picture></picture> 实现轮播
它没有内置状态管理、没有事件钩子、不触发重绘动画，浏览器把它当作静态图像声明处理。即使你写多个 <picture></picture> 并排，它们之间也互不影响，不会自动切换。
常见错误现象：
- 把多个
<picture></picture>套进<div class="carousel"> 就以为能轮播 —— 页面加载后所有图都显示，JS 不接管就只是堆叠的静态块 <li>用 CSS <code>animation动画轮换opacity，但没停用未激活<picture></picture>的资源加载，导致带宽浪费和内存泄漏 - 在
<source></source>里写media="(prefers-reduced-motion: reduce)"试图控制轮播节奏 —— 这个媒体查询只影响初始加载路径，不响应运行时变化 - 每个轮播项用独立
<picture></picture>包裹，统一加class="carousel-item"，初始设hidden或display: none - 当前激活项移除
hidden，并调用img.complete检查是否已加载；若未完成，可监听load事件再执行过渡 - 避免直接修改
<source></source>的srcset—— 浏览器不一定重新解析；推荐整组替换<picture></picture>内部 HTML，或用img.src+img.srcset手动更新（注意：这会绕过<source></source>的 media 匹配） - 移动端需监听
visibilitychange，暂停轮播；用户切走再切回时，别从中间帧突兀继续，应重置计时器 - 首帧
<img>保留loading="eager"（默认），其余帧设loading="lazy"但提前 1–2 帧触发img.loading = "eager" - 用
IntersectionObserver监听即将进入视口的轮播项，在其isIntersecting为true时，提前 300ms 设置img.decoding = "async"并移除hidden - 不要给
<picture></picture>自己加loading—— 浏览器忽略它，只认内部<img>
正确组合：用 JS 控制 <picture></picture> 的显隐与 srcset 切换
轮播逻辑归 JS 管，<picture></picture> 只负责单帧的响应式渲染。关键点是每次只让一个 <picture></picture> 可见，并确保其 <source></source> 和 <img> 属性完整有效。
实操建议：
性能陷阱：图片预加载与懒加载冲突
轮播图常被误设 loading="lazy"，结果滑到第二帧才开始下载，造成明显空白或闪动。
建议策略：
真正复杂的不是结构，是资源生命周期管理：哪一帧该加载、哪一帧该卸载、用户拖拽时如何中断预加载、SSR 渲染后 JS 如何安全接管。这些细节不处理好，<picture></picture> 再规范，轮播也会卡顿或白屏。
