最省事方案是用iframe嵌入PowerPoint Online或Google Slides；手写轮播仅适用于3–5页、离线或强控样式的场景，否则易遇重排、可访问性及响应式兼容问题。

直接用 <iframe> 嵌入现成服务（如 PowerPoint Online 或 Google Slides）是最省事、最稳定的选择；手写 HTML/CSS/JS 轮播只适合 3–5 页、无外部依赖、需离线或强控样式的场景，否则容易掉进重排、可访问性、响应式兼容的坑里。

嵌入外部幻灯片时 src 参数不生效？

常见现象是 iframe 加载后显示白屏或跳转到首页，而不是指定幻灯片页。根本原因是平台分享链接未启用嵌入模式。

• PowerPoint Online 的公开链接必须带 &embed=1（不是 ?embed=1），且不能有 &wdSlideToView=xxx 这类干扰参数
• Google Slides 分享后点「嵌入」，复制的代码里 src 应含 ?embedded=true，若手动拼接，注意 URL 中已有 ? 就改用 & 连接
• 遇到 Refused to display 'xxx' in a frame because it set 'X-Frame-Options' to 'deny'，说明目标站禁用了 iframe —— 别试 allow="..." 或 CSP hack，没用，只能换平台或导出为静态 HTML

手写 CSS-only 轮播为什么点不动？

纯 CSS 方案完全依赖 :target 伪类 + URL hash 触发显示，漏一个环节就整个失效。

• 每个 <section> 必须有合法 id（不能以数字开头，如 id="slide-1" 可用，id="1" 在 Safari 和旧 Chrome 中不识别）
• CSS 里必须写 section { display: none; } 和 section:target { display: block; }，别用 opacity 或 visibility 替代——它们不改变文档流，会导致焦点、打印、屏幕阅读器全部错乱
• 导航链接的 href 必须严格匹配，比如 href="#slide-2" 对应 <section id="slide-2">，大小写、连字符、空格都不能差

用 transform 切换幻灯片还卡顿？

即使用了 transform: translateX()，仍可能因浏览器未开启硬件加速或 DOM 操作不当导致掉帧。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

立即学习“前端免费学习笔记（深入）”；

• 确保幻灯片容器和子项加了 will-change: transform，或者在 <body> 上加 backface-visibility: hidden
• 切换逻辑中避免反复操作 innerHTML 或增删节点，用 classList.toggle("active") 控制显隐，配合 CSS transition 属性
• 移动端慎用 touchmove 手势翻页：默认行为会和页面滚动冲突，加 event.preventDefault() 前必须判断是否真的在幻灯片区域内滑动，否则整页无法滚动

Reveal.js 本地集成后 Reveal is not defined？

这个报错 90% 是加载顺序或执行时机问题，不是插件没下全。

• dist/reveal.js 必须在所有插件（highlight.js、math.js 等）之前引入，且紧跟着写初始化代码：

  Reveal.initialize({ autoSlide: 3000 });

• 不要把 Reveal.initialize() 放在 window.onload 或 DOMContentLoaded 里——Reveal 内部已处理 DOM 就绪，额外包裹反而可能因执行过早而失败
• 路径错误常被忽略：如果 index.html 不在项目根目录，dist/reveal.js 的相对路径要同步调整，或改用绝对路径 /reveal.js

真正难的不是写出能切页的代码，而是让每一页在各种设备上尺寸不塌、焦点不错位、缩放不糊、键盘可操作、屏幕阅读器能读对顺序——这些细节一旦漏掉，演示现场就容易翻车。