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应用编程接口而不是超链接：impress().goto("LastSlide")