优先用 <img>，因其默认支持 loading="lazy" 和宽高比控制；<picture> 适合多分辨率适配但易出错；需写宽高属性、统一路径、用 CSS 类控尺寸；纯 CSS 轮播可用 @keyframes 实现，关键帧须按图数均分；JS 报错多因脚本过早执行，应置于 </body> 前；移动端点击失效常因缺失 touch-action、cursor: pointer 或事件绑定不当。
轮播图用 <img> 还是 <picture>？别硬套响应式模板
零基础直接写轮播，第一反应常是找现成 JS 插件——但多数人卡在图片加载失败、缩放变形、移动端点不动这三步。根本原因不是不会写 JS，而是 HTML 结构没对齐浏览器渲染逻辑。
优先用 <img>，不是因为简单，而是它默认支持 loading="lazy" 和原生宽高比控制；<picture> 适合多分辨率适配场景（比如同一张图要同时给 retina 屏和普通屏），但零基础容易写错 <source> 的 media 和 type 顺序，导致图片不显示。
-
<img src="a.jpg" width="800" height="450" alt="描述">—— 宽高必须写，否则 CSS 拉伸时会抖动 - 所有图片统一放在同一目录下，路径别用
../images/这类相对跳转，直接用images/a.jpg - 不要在
<img>里加style="width:100%"，改用 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>标签放到</body>前面，而不是塞在<head>里 - 确认 JS 里选中的 ID 或 class 名和 HTML 里完全一致，区分大小写，比如
document.getElementById("banner")对应的是<div id="banner">，不是<div class="banner"> - 如果用了
DOMContentLoaded，检查是否拼错成DomContentLoaded（少个C）
移动端点不动？检查这三个地方
PC 上好好的轮播，一到手机上就点不了“下一张”按钮，不是 JS 不兼容，而是触摸事件没激活。
- 给轮播容器加
touch-action: pan-y（允许上下滑，禁用左右拖拽干扰） - 按钮元素必须有
cursor: pointer，否则 iOS Safari 默认不触发click事件 - 别用
ontouchstart直接绑定，优先用addEventListener('touchstart', ...)，且监听器里加e.preventDefault()防止误触滚动
轮播最难的从来不是代码量，而是图片尺寸、CSS 层叠顺序、事件触发时机这三者咬合的精度——调一个参数，可能影响全部五张图的过渡节奏。动手前先定死一张图的宽高和容器尺寸，其余都是复制粘贴，别一开始就折腾“无限循环”或“淡入淡出”。
