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