impress.js - Impress.js - 创建按钮以转到不同的位置/步骤

Question

如何在 Impress.js 幻灯片上创建按钮 - 允许我转到演示文稿的其他部分的按钮。

我知道有下一步/上一步的代码，但我想去一个完全不同的位置/步骤。

此外，是否有一种方法可以在现有图像之上覆盖 hte 按钮。

谢谢

妮可

Answer 1

选项 1：您可以使用普通的 html 链接和锚点。

（注意：在下面的 html 中，我删除了很多内容以使原理尽可能清晰，因此按原样剪切和粘贴可能行不通，但相信我，这个想法确实可行 :)）

<div class="step" step="0" data-x="0" data-y="0">
  <h1>This is the first slide</h1>
  <p>Here comes some text.</p>
  <p>Jump to <a href="#LastSlide">Last-Slide</a></p>
</div>

<div class="step" step="1" data-x="1200" data-y="0">
  <h1>This is the second slide</h1>
</div>

<div class="step" step="3" id="LastSlide" data-x="-800" data-y="0" data-z="r2000" data-rotate-y="90">
  <h1>Last Slide</h1>
      <p>How did I get here?</p>
</div>

这里的关键部分是第一张幻灯片中的链接（您可以将其替换为按钮、图像或任何您想要的内容）：<a href="#LastSlide">Last-Slide</a>

然后在目标幻灯片中定义该 ID：<div class="step" step="3" id="LastSlide"... >

注意：在跳转到目标幻灯片后，您的历史记录会丢失，即向上翻页会将您带到演示文稿中逻辑上位于目标幻灯片之前的任何幻灯片。因此，如果您想回到原来的位置，请在目标幻灯片中放置其他链接/按钮，或使用浏览器上的“返回”按钮。

选项 2：使用 impress.js api 而不是超链接：impress().goto("LastSlide")