轮播图在网页头部的核心是保障首屏稳定，需设死容器高度、隐藏溢出、叠层定位、显式控制显示/隐藏、暂停自动轮播、图片加载兜底、按钮语义化及禁用处理。
轮播图放在网页头部，核心不是“怎么动”，而是“怎么不破坏页面流、不抢焦点、不卡首屏”。直接上结构和关键控制点。
轮播容器必须设死高度 + overflow: hidden
头部区域一旦被轮播图撑开或抖动，整个页面会跳。所有轮播项（<img> 或 <div class="slide">）必须叠在同一个定位上下文中，且父容器不能靠内容自适应高度。
-
<div class="carousel">必须显式声明height: 400px（或根据设计定值），不能用min-height或auto - 内部图片容器（如
<div class="slides">）需position: relative或absolute，避免文档流干扰 - 所有轮播项默认
display: none，仅当前项设display: block—— 不要用visibility: hidden，它仍占位，可能让<header>高度异常
自动轮播必须带暂停逻辑，且禁用 hover 恢复（移动端无效）
头部轮播常被误认为“背景视频”，但实际是交互区。用户鼠标移入时若继续自动切换，会打断阅读；而移出后恢复，对触屏设备毫无意义。
- 用
let timer = null全局存定时器 ID，每次调用next()前先clearInterval(timer) - 绑定
mouseenter事件清定时器，但不要绑mouseleave—— 移动端无 hover，且用户离开后未必想继续播 - 点击左右按钮或指示器后，立即重置定时器：
timer = setInterval(next, 4000)，否则刚切到第2张，0.5秒后又跳第3张
图片加载失败时 fallback 要可控，不能留白或错位
头部轮播一张图加载失败，整个 banner 就塌了。不能只靠 alt 文本补救，得有视觉兜底。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 每张
<img>必须带width和height属性（如width="1200" height="400"），防止加载中布局抖动 - CSS 中加
img { background: #f5f5f5; object-fit: cover; }，确保即使src404 也有占位色和裁剪行为 - 监听
onerror动态替换为备用图：img.onerror = () => { img.src = '/images/placeholder.jpg'; };
指示器和按钮必须用 <button type="button">，禁用状态要显性处理
头部区域常嵌在 <header> 或导航栏里，若用 <a> 或无 type 的 <button>，点击可能触发页面跳转或表单提交。
- 左右按钮写成
<button type="button" class="carousel-prev"></button>，避免默认行为 - 指示器用
<button type="button" data-index="0"></button>，不用<span>—— 可聚焦、可键盘操作、支持disabled - 单张图时隐藏按钮，或设
disabled并配 CSS：button:disabled { opacity: 0.3; cursor: not-allowed; }
最易被忽略的是：轮播图在头部不是“动效组件”，而是“首屏信息通道”。一切优化（懒加载、transition、GPU加速）都该让位于首屏可见性与加载稳定性 —— 图片没出来前，宁可显示占位色，也不要留空或闪白。
