标签本身不支持轮播，它仅是响应式图像容器，需javascript控制切换逻辑；轮播须动态替换其内部和，确保每张图独立响应式配置并避免预加载。
<picture></picture> 标签本身不支持轮播 —— 它只是响应式图像的容器，用于根据设备条件（如屏幕宽度、像素密度、格式支持）选择最合适的 <source></source> 或回退到 <img>。想实现“相册轮播”，必须配合 JavaScript 控制切换逻辑，<picture></picture> 只负责每张图的高质量、适配性渲染。
为什么不能只靠 实现轮播
<picture></picture> 是静态声明式结构，浏览器解析后只加载当前匹配的源，不会监听状态变化或触发重绘。轮播本质是：定时/手动修改 DOM 中正在显示的图像源（或其父 <picture></picture> 的内容）。常见误解是把多个 <picture></picture> 堆在一起再用 CSS 切换 visibility，这会导致所有图片提前加载，浪费带宽且失去响应式意义。
正确做法：用 JS 动态替换 内容
为每张轮播图维护一套完整的 <source></source> 配置，JS 每次轮播时，清空并重新注入对应配置，再更新 <img> 的 src 和 alt。这样既保持单张图的响应能力，又避免预加载冗余资源。
关键点：
- 每个轮播项的数据结构应包含
sources数组（含media、srcset、type）和img对象（含src、alt） - 不要用
innerHTML直接拼接字符串注入<picture></picture>，容易 XSS；建议用document.createElement+appendChild - 切换前调用
img.onload和img.onerror确保新图加载完成再显示，否则可能闪白屏 - 移动端需禁用
touchstart时的默认缩放行为（event.preventDefault()），否则手势滑动会干扰轮播
一个轻量轮播示例（无框架）
<div id="album-carousel">
<picture id="carousel-picture"><source media="(min-width: 768px)" srcset="photo1-large.webp 2x, photo1-large.jpg 1x" type="image/webp"><source media="(max-width: 767px)" srcset="photo1-small.webp 2x, photo1-small.jpg 1x" type="image/webp">
@@##@@
</source></source></picture>
</div>
<button id="prev-btn">←</button>
<button id="next-btn">→</button>
JS 部分只需操作 #carousel-picture 的子节点：
- 调用
pictureElement.replaceChildren(...)插入新的<source></source>和<img src="photo1-small.jpg" alt="第一张照片"> - 对新
<img>绑定load事件，成功后再移除 loading 状态（比如淡入动画） - 注意：Safari 旧版本不支持
replaceChildren，可降级为pictureElement.innerHTML = ""+ 循环appendChild
容易被忽略的细节
轮播中每张图的 <source></source> 必须独立配置 —— 不能共用同一套 srcset。例如，大图的高清版本可能有 4K WebP，而小图只需 2x Retina JPG；混用会导致低分辨率设备加载超大图。另外，<picture></picture> 内的 <img> 的 src 属性仍需设置，它是所有不支持 <source></source> 的浏览器（如 IE）的唯一 fallback，也是现代浏览器在无匹配 <source></source> 时的兜底路径。这个 src 值不能留空或写占位符，否则会触发 404 请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
