Reveal.js

一个能够帮助我们很轻易地使用 HTML 创建一个漂亮的演示文稿的框架。

幻灯片切换方式

右下角控制条控制切换

可以使用键盘方向键操作

可以设置使用鼠标滚轮切换

移动端滑动切换

自动滑动

// 每 5 秒滑动一次，如果设置成0，则不自动滑动
Reveal.configure({
  autoSlide: 5000
});
                

幻灯片背景

幻灯片包含在幕的一个有限区域中，默认情况下，允许它们适应任何视口和缩放一致性。你可以通过给你的 <section> 元素添加一个 data-background 属性来在幻灯片之外添加整个页面的背景。支持四种类型的背景： color, image, video 和 iframe。

幻灯片切换效果

局幻灯片切换效果是通过 transition 配置值来设定的。你可以通过指定<section>元素的 data-transition 属性来重写全局配置。

支持效果： none/fade/slide/convex/concave/zoom

嵌入式多媒体

嵌入的 HTML5 <video>/<audio> 以及 YouTube 内联框架将会在你从一个幻灯片导航离开的时候自动暂停。这可以通过给你的元素指定一个 data-ignore 属性来禁止。

内部链接

在幻灯片之间链接是很容易的。下面的例子中，第一个链接指向了另外一个幻灯片的索引，第二个链接指向了另外一个幻灯片的ID属性 (<section id="some-slide">)：

概览与全屏模式

点击 "Esc" 或 "o" 键来切换概览模式。当你在这种模式下的时候，你仍然可以在幻灯片之间导航。

只需要在你的键盘上点击 »F« 按键即可进入全屏模式。点击 »ESC« 按键推出全屏模式。

嵌入图片与链接