印象深刻.js - 创建按钮以转到不同的位置/步骤

Question

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

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

另外，有没有办法将按钮叠加在现有图像的顶部。

谢谢

妮 可

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")