优先用 ，因其默认支持 loading="lazy" 和宽高比控制； 适合多分辨率适配但易出错；需写宽高属性、统一路径、用 css 类控尺寸；纯 css 轮播可用 @keyframes 实现，关键帧须按图数均分；js 报错多因脚本过早执行，应置于 前；移动端点击失效常因缺失 touch-action、cursor: pointer 或事件绑定不当。
轮播图用 <img> 还是 <picture></picture>？别硬套响应式模板
零基础直接写轮播，第一反应常是找现成 JS 插件——但多数人卡在图片加载失败、缩放变形、移动端点不动这三步。根本原因不是不会写 JS，而是 HTML 结构没对齐浏览器渲染逻辑。
优先用 <img>，不是因为简单，而是它默认支持 loading="lazy" 和原生宽高比控制；<picture></picture> 适合多分辨率适配场景（比如同一张图要同时给 retina 屏和普通屏），但零基础容易写错 <source></source> 的 media 和 type 顺序，导致图片不显示。
-
<img src="a.jpg" style="max-width:90%" style="max-width:90%" alt="描述">—— 宽高必须写，否则 CSS 拉伸时会抖动 - 所有图片统一放在同一目录下，路径别用
../images/这类相对跳转，直接用images/a.jpg - 不要在
<img>里加style="max-width:90%"，改用 CSS 类控制尺寸
用纯 CSS 实现自动轮播，不用 JS 也能跑
很多人以为轮播必须靠 JS 控制定时器，其实 CSS @keyframes + animation 就能搞定基础自动切换。优势是启动快、无 JS 执行依赖，缺点是无法暂停或手动切图——但对零基础来说，先让图动起来比交互完整更重要。
核心是把所有 <img> 包进一个固定宽高的容器，用 position: absolute 叠在一起，再通过 opacity 和 z-index 控制显隐。
- 动画时间要匹配图片数量：4 张图就设 4s 一轮，每张停留 1s，用
animation-duration: 4s - 关键帧不能只写
0%, 100%，得按图序拆成0%, 25%, 50%, 75%, 100%，否则最后一张闪退 - 加
animation-iteration-count: infinite，不然播完一次就停
TypeError: Cannot read property 'addEventListener' of null 怎么快速定位？
这是 JS 轮播最常报的错，表面是 JS 找不到元素，实际 90% 是 HTML 加载顺序问题：JS 在 DOM 渲染前就执行了。
解决方式不是改 JS，而是调整 HTML 位置：
- 把
<script></script>标签放到
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
