如何在网页中编写幻灯片代码并实现切换效果

网页幻灯片不一定需要专门的演示文稿软件。用 HTML 表达每一页的内容，用 CSS 控制布局和显示状态，再用 JavaScript 响应按钮或键盘操作，就能在普通网页中实现页面切换。这样的方案适合产品介绍、内部培训、活动说明、交互式报告，以及嵌入现有网站的短篇演示。

本文从一个不依赖框架的示例开始，逐步说明结构、切换逻辑、可访问性、适用边界和安全注意事项。示例代码可以放入已有网页中运行；如果要单独测试，可把代码片段分别放入 HTML 文件的相应位置。

一、先判断是否适合用网页幻灯片

网页幻灯片的优势是可以复用网站已有的字体、颜色和交互方式，也容易嵌入链接、表单和实时数据。内容可以随网页部署更新，并能通过浏览器在桌面和移动设备上访问。若需要把演示嵌入产品页面，或让幻灯片与网页内容产生交互，这种方式尤其方便。

但它并不自动等同于 PowerPoint 一类的演示软件。网页幻灯片依赖浏览器和网络环境，打印、离线播放、演讲者备注、复杂动画、导出为演示文件等能力需要另外实现或借助工具。大量页面、复杂媒体、严格的演讲控制或专业排版需求，可能更适合成熟的演示框架或专用软件。

开始前可以先回答三个问题：

• 受众是在浏览网页，还是需要下载和离线播放？
• 演示是否必须支持键盘操作、屏幕阅读器和窄屏设备？
• 内容是否来自可信的固定文本，还是由用户、接口或第三方提供？

这些答案会影响布局、交互方式和安全处理方式。尤其是第三类内容，不能因为它出现在幻灯片中，就直接当作可信 HTML 插入页面。

二、把每一页表示为一个 HTML 区块

最简单的结构是：一个幻灯片容器内包含若干页，再放置上一页和下一页按钮。每一页使用语义明确的 HTML 元素，标题使用真实的标题标签，正文使用段落或列表。这样即使暂时没有脚本，内容仍然是普通网页内容，而不是只能由 JavaScript 解释的数据。

下面是一份可运行的基础实现。它包括三页内容、前后切换按钮、页码提示，以及左右方向键操作。把代码中的 CSS 放入页面样式表，把主体标记放入页面对应位置，再把脚本放到这些标记之后即可。

<style>
  .deck {
    max-width: 48rem;
    margin: 2rem auto;
    padding: 1.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    font-family: system-ui, sans-serif;
  }

  .slide {
    min-height: 12rem;
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 0.5rem;
  }

  /* 防止其他 display 规则意外覆盖 hidden 的显示效果 */
  .slide[hidden] {
    display: none !important;
  }

  .slide h2 {
    margin-top: 0;
  }

  .deck-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
  }

  .deck button {
    padding: 0.55rem 0.9rem;
    font: inherit;
    cursor: pointer;
  }

  .deck button:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
  }
</style>

<div class="deck" id="demo-deck" aria-label="网页幻灯片示例">
  <div class="slides">
    <section class="slide"
      role="group"
      aria-roledescription="幻灯片"
      aria-label="第 1 页，共 3 页">
      <h2>第一部分：问题背景</h2>
      <p>先说明受众遇到的问题，以及为什么需要关注它。</p>
    </section>

    <section class="slide"
      role="group"
      aria-roledescription="幻灯片"
      aria-label="第 2 页，共 3 页"
      hidden>
      <h2>第二部分：方案概览</h2>
      <p>用简短文字描述方案，并说明它解决问题的方式。</p>
    </section>

    <section class="slide"
      role="group"
      aria-roledescription="幻灯片"
      aria-label="第 3 页，共 3 页"
      hidden>
      <h2>第三部分：下一步</h2>
      <p>列出结论、行动建议或进一步阅读的链接。</p>
    </section>
  </div>

  <div class="deck-controls">
    <button type="button" data-action="previous">上一页</button>
    <span data-status aria-live="polite">第 1 页，共 3 页</span>
    <button type="button" data-action="next">下一页</button>
  </div>
</div>

<script>
  (() => {
    const deck = document.querySelector("#demo-deck");
    if (!deck) return;

    const slides = Array.from(deck.querySelectorAll(".slide"));
    const status = deck.querySelector("[data-status]");
    const previousButton = deck.querySelector('[data-action="previous"]');
    const nextButton = deck.querySelector('[data-action="next"]');

    if (slides.length === 0 || !status || !previousButton || !nextButton) {
      return;
    }

    let currentIndex = slides.findIndex((slide) => !slide.hidden);
    if (currentIndex < 0) currentIndex = 0;

    function showSlide(index) {
      currentIndex = Math.max(0, Math.min(index, slides.length - 1));

      slides.forEach((slide, slideIndex) => {
        const isCurrent = slideIndex === currentIndex;
        slide.hidden = !isCurrent;
        slide.setAttribute(
          "aria-label",
          `第 ${slideIndex + 1} 页，共 ${slides.length} 页`
        );
      });

      status.textContent = `第 ${currentIndex + 1} 页，共 ${slides.length} 页`;
      previousButton.disabled = currentIndex === 0;
      nextButton.disabled = currentIndex === slides.length - 1;
    }

    previousButton.addEventListener("click", () => {
      showSlide(currentIndex - 1);
    });

    nextButton.addEventListener("click", () => {
      showSlide(currentIndex + 1);
    });

    deck.addEventListener("keydown", (event) => {
      if (event.altKey || event.ctrlKey || event.metaKey) return;

      if (event.key === "ArrowRight") {
        event.preventDefault();
        showSlide(currentIndex + 1);
      } else if (event.key === "ArrowLeft") {
        event.preventDefault();
        showSlide(currentIndex - 1);
      }
    });

    showSlide(currentIndex);
  })();
</script>

示例中的 <、> 等字符在代码展示区进行了 HTML 转义，这是为了让浏览器把它们显示为代码，而不是把它们当成文章页面的标签。复制到真实页面的 HTML 源码时，应使用未转义的标签；如果代码是通过 CMS 编辑器发布，需确认编辑器不会再次自动转义或清理内容。

三、切换逻辑是怎样工作的

这段脚本的核心只有一个状态：currentIndex，表示当前显示的幻灯片在数组中的位置。数组下标从 0 开始，因此第一张是 0，第二张是 1。showSlide() 接收目标位置，把它限制在 0 和最后一页之间，然后只显示对应的区块。

这里使用了 HTML 的 hidden 属性隐藏非当前页。它能让隐藏页面不参与正常显示，也通常不会让其子元素进入键盘焦点顺序。脚本启动时会寻找第一张没有 hidden 属性的页面；若全部隐藏，则显示第一张。每次切换时，状态文字和无障碍标签也会同步更新。

上一页和下一页按钮在边界位置会被禁用，因此无法从第一页继续向前，也无法从最后一页继续向后。这是一种常见的线性演示行为。如果产品需求是循环播放，可以在切换函数中改用取模运算，但要让用户清楚知道到达末页后会回到开头，避免产生意外跳转。

键盘监听放在幻灯片容器上，而不是整个文档上。用户需要先让容器中的按钮或内容获得焦点，左右方向键才会切换，这样能减少与网页其他区域的键盘操作冲突。若演示内容包含方向键操作的游戏、图表或文本编辑器，应进一步限制快捷键生效的区域，或提供关闭快捷键的方式。

四、按需要扩展功能

1. 增加页码按钮

如果页数较少，可以在控制区增加一组页码按钮，让用户直接跳转。按钮应使用 type="button"，避免位于表单内部时意外提交表单。当前页按钮可设置 aria-current="page"，并在切换后更新该属性。不要只用颜色表示当前页，也应提供文字、边框或其他可辨识的状态提示。

2. 增加淡入淡出

CSS 过渡可以改善切换观感，但 hidden 会立刻移除元素，通常无法直接对它实现离场动画。若要做淡出，需要控制透明度、可见性和切换时序，并处理动画完成、快速连续切换等情况。还应尊重用户的减少动态效果偏好，例如通过 prefers-reduced-motion 媒体查询关闭或缩短动画。不要为了动画让非当前页长时间保持可交互状态。

3. 支持触屏滑动

滑动操作可以作为按钮之外的补充，但不能成为唯一的切换方式。触屏用户需要可见按钮，键盘用户需要键盘支持，屏幕阅读器用户需要明确的页面和控件说明。滑动还可能与页面滚动、浏览器返回手势发生冲突，正式上线前要在目标设备上测试。

4. 多个幻灯片实例

示例用唯一的 id 查找单个实例。页面有多个演示区域时，不要重复使用同一个 id，因为 ID 应在文档中保持唯一。可以把初始化逻辑改为遍历所有带有特定类名的容器，并对每个容器分别查找其内部页面和控件，避免一个实例的按钮控制另一个实例。

五、可访问性不能留到最后补

幻灯片是交互界面，至少应做到以下几点：

• 使用真正的按钮，而不是用普通文本加点击事件伪装按钮。
• 按钮有清楚的名称，焦点状态明显，键盘可以到达和操作。
• 页面切换状态能够被辅助技术获知；示例使用 aria-live="polite" 播报页码。
• 内容结构正确使用标题、段落、列表和链接，不要把整页内容都写进一个没有语义的容器。
• 文本与背景有足够对比，页面在窄屏下不依赖横向滚动才能阅读。

aria-roledescription 用于提供更易理解的角色描述，但它不能替代语义结构，也不能保证所有辅助技术都以完全相同的方式播报。应使用目标浏览器和辅助技术进行实际检查。需要注意，aria-label 只是提供可访问名称，不会自动改变元素的可见文本或行为。

六、适用边界与内容安全

固定写在页面源代码中的幻灯片文本通常由开发者控制，但若页面从接口、用户提交内容或外部数据源加载幻灯片，风险会发生变化。不要把未经校验的数据拼接进 innerHTML，否则其中的 HTML 可能被浏览器解析，带来跨站脚本等注入风险。若只需要展示普通文本，应优先使用 textContent；若确实需要允许有限 HTML，应采用经过审查的消毒流程，并根据具体框架和部署环境配置内容安全策略等防护。

本示例中的 textContent 用来更新页码文字，避免把动态字符串当成 HTML 解析。它不代表整段页面已经自动具备安全性：其他动态内容、链接地址、第三方脚本、嵌入资源和服务器端模板仍需分别审查。转义代码示例也只是文章展示层面的处理，不能代替应用中的输入验证与输出编码。

如果内容必须离线可用，需要确认脚本、字体和媒体资源均可在离线环境访问；如果内容需要保护访问权限，前端隐藏页面并不是访问控制。用户仍可能通过开发者工具或网络请求看到已发送到浏览器的数据。敏感数据不应仅靠隐藏幻灯片来保护，权限校验应在服务端完成。

七、常见错误及排查方式

错误一：点击按钮没有反应

先检查脚本是否在幻灯片标记之后执行，选择器是否和实际的 ID、类名一致，以及浏览器控制台是否报告语法错误。如果使用构建工具，还要确认脚本确实被加载，并检查是否存在严格的内容安全策略阻止内联脚本。生产环境通常更适合把脚本放入受控的外部文件，而不是为了方便在 HTML 中写任意内联脚本。

错误二：所有页面同时显示，或没有页面显示

检查每个页面是否使用了统一的选择器，例如 .slide，以及初始页面是否有误加的 hidden 属性。也要检查样式表是否覆盖隐藏规则。示例中的 .slide[hidden] { display: none !important; } 用来降低样式冲突的可能，但如果项目有特殊显示逻辑，仍要测试最终计算样式。

错误三：内容切换后焦点消失

若焦点原本位于即将隐藏的按钮或链接上，切换后它可能不再处于可见区域。基础示例的方向键操作依赖容器内已有的焦点，因此应测试鼠标、键盘和屏幕阅读器的实际使用路径。复杂界面可以在切换后把焦点移到新页面标题或提供明确的焦点管理策略，但不能每次切换都不加区分地抢走用户焦点。

错误四：键盘快捷键干扰页面其他功能

避免在 document 上无条件截获方向键。文本框、下拉菜单、图表和嵌入式应用可能也依赖方向键。示例只在幻灯片容器获得焦点时处理按键，并跳过组合键；实际项目还可判断焦点是否位于输入控件中，或只在用户启用演示模式时响应快捷键。

错误五：在移动端出现内容溢出

不要为整页设定固定宽度或高度。长标题、用户缩放、不同字体和窄屏都可能改变实际布局。应使用最大宽度、弹性布局和适当的内边距，并在小屏设备上检查按钮是否容易点击。内容本身也应精简，不能指望每一页都靠缩小字号塞进固定盒子。

错误六：复制示例后标签显示成文字

如果发布后的页面显示 <section> 而不是生成幻灯片，通常是把转义后的代码展示内容直接粘贴进实际页面了。代码示例需要转义，是为了放在教程里展示；执行时应使用正常 HTML 标签。反过来，如果把未转义的标签放进文章正文，浏览器可能把它当作真实页面结构解析。

八、上线前检查清单

• 第一页默认可见，按钮在第一页和最后一页的状态正确。
• 鼠标、键盘和触屏操作均有可行路径，切换不会意外影响页面滚动或表单。
• 标题、页码和按钮名称能说明当前状态；不只依赖颜色传递信息。
• 在窄屏、放大文本和常用浏览器中检查布局。
• 确认动态内容的来源与处理方式；普通文本用文本接口呈现，不把不可信内容直接作为 HTML 插入。
• 检查控制台错误、实际焦点顺序、屏幕阅读器播报，以及部署环境对脚本的限制。

网页幻灯片的基本实现并不复杂：用结构清晰的 HTML 保存内容，用 CSS 管理布局，用少量 JavaScript 维护当前页状态。真正决定实现是否可靠的，是边界是否明确——按钮和键盘如何操作、页面如何被辅助技术识别、窄屏如何呈现，以及外部内容如何安全进入页面。先从简单、可访问的切换开始，再根据实际需求增加动画、页码导航或触屏手势，通常比一开始堆叠复杂效果更容易维护。