幻灯片导航

相关源文件

• js/controllers/backgrounds.js
• js/controllers/controls.js
• js/controllers/focus.js
• js/controllers/fragments.js
• js/controllers/overview.js
• js/controllers/pointer.js
• js/controllers/progress.js
• js/index.js
• js/reveal.js

本文档解释了 reveal.js 中幻灯片导航的工作原理，涵盖了导航架构、导航方法以及如何自定义导航行为。幻灯片导航系统使演示者和观众能够在大纲中在幻灯片和片段之间移动。

有关特定于片段的导航行为的信息，请参阅 片段。有关基于 URL 的导航的信息，请参阅 URL 导航。

1. 导航架构

reveal.js 中的导航系统允许多个方向的演示文稿浏览。演示文稿组织在二维幻灯片网格中，支持片段（增量内容显示）。

来源： js/reveal.js1231-1289 js/controllers/controls.js214-276 js/controllers/fragments.js357-373

1.1 幻灯片组织

reveal.js 中的幻灯片以二维布局组织

来源： js/reveal.js1231-1289 js/reveal.js1040-1114

2. 导航方法

reveal.js 提供了多种导航幻灯片的方法

2.1 键盘导航

键盘控制器支持使用键盘按键进行导航。

键	方向	方法
右箭头, 空格键	下一张幻灯片/片段	next()
左箭头	上一张幻灯片/片段	prev()
上箭头	向上移动（垂直幻灯片）	up()
下箭头	向下移动（垂直幻灯片）	down()
Page Up	上一张幻灯片	left()
Page Down	下一张幻灯片	right()
概览 (o)	切换概览模式	overview.toggle()

来源： js/controllers/keyboard.js js/reveal.js1231-1289

2.2 触摸导航

在支持触摸的设备上，可以使用触摸手势进行导航

• 向右滑动：上一张幻灯片
• 向左滑动：下一张幻灯片
• 向上滑动：上一张幻灯片（如果配置了）
• 向下滑动：下一张幻灯片（如果配置了）

来源： js/controllers/touch.js

2.3 UI控件导航

导航控件显示为演示文稿角落的箭头

来源： js/controllers/controls.js214-276

2.4 进度条导航

点击进度条可以直接导航到对应点击位置的幻灯片。

来源： js/controllers/progress.js85-102

2.5 程序化导航

reveal.js 提供了一个用于程序化导航的 JavaScript API

来源： js/reveal.js1231-1289 js/controllers/fragments.js357-373

3. 导航决策系统

导航系统根据当前幻灯片位置和演示文稿结构确定可用路线。

3.1 可用路线

availableRoutes() 方法返回一个对象，指示从当前位置可以进行哪些导航方向。

routes 对象包含每个方向的布尔值

来源： js/reveal.js3000-3100

3.2 导航模式

reveal.js 支持两种导航模式

1. 默认模式：通过幻灯片进行二维导航（水平和垂直）
2. 线性模式：按顺序浏览所有幻灯片，无论其结构如何

可以使用 navigationMode 配置选项来配置导航模式

来源： js/reveal.js534-540 js/controllers/controls.js219-238

4. 片段导航

片段是幻灯片中的元素，可以增量显示。片段导航系统与主导航系统集成。

4.1 片段路线

与幻灯片类似，片段有自己的可用路线

片段路线与主导航系统集成，允许在幻灯片和片段之间无缝过渡。

来源： js/controllers/fragments.js62-78 js/controllers/fragments.js309-349

5. 概览模式

概览模式提供所有幻灯片的鸟瞰图，允许通过点击所需幻灯片进行直接导航。

来源： js/controllers/overview.js24-76 js/controllers/overview.js228-253

6. 导航状态管理

导航系统维护当前演示文稿位置和历史的状态信息。

6.1 状态变量

关键状态变量包括

• indexh：水平幻灯片索引
• indexv：垂直幻灯片索引
• previousSlide：上一个幻灯片元素的引用
• currentSlide：当前幻灯片元素的引用
• navigationHistory：记录导航方向

来源： js/reveal.js61-73

6.2 幻灯片过渡

在幻灯片之间导航时，会根据配置的过渡样式应用过渡效果

来源： js/reveal.js1231-1289

7. 配置选项

一些配置选项会影响导航行为

选项	默认	描述
controls	true	显示导航控件
controlsTutorial	true	帮助可视化导航方向
controlsLayout	'bottom-right'	控件的位置
controlsBackArrows	'faded'	后退箭头的外观
progress	true	显示进度条
keyboard	true	启用键盘导航
overview	true	启用概览模式
touch	true	启用触摸导航
navigationMode	'default'	导航模式（“default”或“linear”）
fragments	true	启用片段导航
fragmentInURL	false	在 URL 中包含片段索引
mouseWheel	false	启用通过鼠标滚轮进行导航
jumpToSlide	true	允许通过数字键跳转到幻灯片

来源： js/reveal.js477-551

8. 事件系统

导航系统在幻灯片更改前后触发事件，以便进行自定义行为和集成

• beforeslidechange：在幻灯片更改之前触发
• slidechanged：在幻灯片更改后触发
• fragmentshown：在片段显示时触发
• fragmenthidden：在片段隐藏时触发

这些事件包含有关先前和当前幻灯片的数据，可用于实现自定义行为。

来源： js/reveal.js715-768

与其他组件的集成

导航与多个其他组件集成

来源： js/reveal.js60-130 js/reveal.js1231-1289