让幻灯片真正撑满视口需设html和body为height:100%并清除默认边距，幻灯片容器用position:fixed+100vw/100vh+overflow:hidden，补全viewport meta，图片用background-image+cover兜底防塌陷。
如何让幻灯片真正撑满整个视口，不被滚动条或边距干扰
全屏幻灯片失效，往往不是JS没跑起来，而是HTML和CSS基础没压住。关键就两点：html 和 body 必须设为 height: 100%，且移除默认边距；所有幻灯片容器（比如 #slider）得用 position: fixed 或 height: 100vh，不能依赖父容器高度。
常见错误现象：顶部留白、底部出现滚动条、切换时画面抖动。根本原因是浏览器默认给 body 加了 margin，且 vh 在移动端可能受地址栏缩放影响。
html, body { margin: 0; padding: 0; height: 100%; }- 幻灯片外层容器加
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; - 避免用
height: 100%嵌套多层——只要有一层没显式设高，链路就断了 - 移动端测试时，把
viewportmeta 补全：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
用纯CSS实现自动轮播+手动切换，不依赖框架
不需要引入 Swiper 或 Glide，CSS @keyframes + input[type="radio"] 就能搞定基础轮播逻辑，且无JS执行延迟、兼容性好（IE11+ 支持）。
使用场景：内容少（3–5张）、无需复杂过渡效果、对首屏加载速度敏感的落地页。
立即学习“前端免费学习笔记（深入）”；
- 每张图对应一个
input#slide-1，用label[for="slide-1"]控制焦点 - 轮播靠
animation驱动margin-left或transform: translateX()，但必须配合animation-iteration-count: infinite - 手动点击时，用
:checked重置动画状态：input#slide-2:checked ~ .slides { animation-play-state: paused; transform: translateX(-100%); } - 注意：CSS 动画无法精确控制暂停时刻，若需“点哪停哪”，仍需极简JS监听
change事件
图片加载失败时，幻灯片区域不能塌陷
全屏幻灯片一旦某张图 404 或加载超时，img 标签会退化成一行文字+空框，高度归零，整个视口就露底了。
解决方案不是等 JS 监听 onerror 再替换，而是在 HTML 层级就兜底。
- 所有
img必须带width和height属性（哪怕只是占位值），并设object-fit: cover - 用伪元素遮罩背景色：
.slide::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: -1; } - 更稳妥的做法：改用
background-image，配合background-size: cover，图片挂了至少背景色还在 - 不要在
img上直接设height: 100%——父容器没高度时它照样塌
键盘方向键和鼠标滚轮支持，但别抢页面默认行为
加了左右键切换很贴心，但如果用户正想滚动页面，一按方向键却切了图，体验反而变差。
核心原则：只在幻灯片获得焦点（tabindex="0"）或鼠标悬停时响应交互。
- 给幻灯片容器加
tabindex="0"，然后监听keydown，仅当event.target === sliderEl才执行切换 - 鼠标滚轮用
wheel事件，但要event.deltaY > 0才切下一张，避免误触 - 务必调用
event.preventDefault()—— 否则在 Firefox 中滚轮会同时触发页面滚动和幻灯片切换 - 离开幻灯片区域后，自动移除焦点（
blur()），防止键盘操作持续生效
真正难的不是写切换逻辑，是判断“此刻用户到底想干嘛”。滚动、聚焦、悬停、触摸——不同输入方式得用不同信号来区分，否则越加功能越反人类。
