reveal.js是一种力量jQueryJavaScript库，用于在网页上创建美观、可触摸、功能齐全、类似powerpoint的HTML5演示。

参见：

• JavaScript中的10个最佳HTML演示框架

主要功能：

• 支持无限级别的嵌套幻灯片。
• 按ESC键时的幻灯片概览模式。
• 针对移动和触摸设备进行了优化。
• 允许您使用内联或外部Markdown写入幻灯片内容。
• 支持幻灯片中的片段。
• Performant渐变、滑动、凸面、凹面和缩放过渡。
• 10多种内置主题，适合您的设计。
• 您可以在内部链接幻灯片。
• 演示文稿可以导出为PDF。
• 允许您使用B或暂停演示。钥匙
• 从右到左的支撑
• 扩展JavaScript API
• 自动进度
• 视差背景
• 自定义键盘绑定
• 图像、iframe、视频、视差背景。

目录：

• 安装
• 加成
• 数据属性
• 选项
• API方法
• 事件

如何使用它:

1.下载软件包，并在HTML文档中加载必要的JavaScript和CSS文件。

<link rel="stylesheet" href="dist/reveal.css" />
<script src="dist/reveal.js"></script>

2.在文档中加载您选择的主题：

<link rel="stylesheet" href="dist/theme/beige.css" />
<link rel="stylesheet" href="dist/theme/black.css" />
<link rel="stylesheet" href="dist/theme/blood.css" />
<link rel="stylesheet" href="dist/theme/league.css" />
<link rel="stylesheet" href="dist/theme/moon.css" />
<link rel="stylesheet" href="dist/theme/night.css" />
<link rel="stylesheet" href="dist/theme/serif.css" />
<link rel="stylesheet" href="dist/theme/simple.css" />
<link rel="stylesheet" href="dist/theme/sky.css" />
<link rel="stylesheet" href="dist/theme/solarized.css" />
<link rel="stylesheet" href="dist/theme/white.css" />

3.在文档中加载您选择的插件：

<!-- Syntax highlighting -->
<script src="plugin/highlight/highlight.js"></script>
 
<!-- Write content using Markdown -->
<script src="plugin/markdown/markdown.js"></script>
 
<!-- Render math equations -->
<script src="plugin/math/math.js"></script>
 
<!-- Show a speaker view in a separate window -->
<script src="plugin/notes/notes.js"></script>
 
<!-- Press CTRL+Shift+F to search slide content -->
<script src="plugin/highlight/highlight.js"></script>
 
<!-- Alt+click to zoom in on elements -->
<script src="plugin/zoom/zoom.js"></script>

4.您也可以使用NPM安装和导入reveal.js。

# Yarn
$ yarn add reveal.js
 
# NPM
$ npm i reveal.js --save

import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';
// .. more plugins here

5.初始化reveal.js，我们就可以开始了。

let instance = new Reveal({
    // ... options here ...
})
instance.initialize();

6.根据您的需要加载一个外部版本。所有可能的扩展：

• 突出：Synax荧光笔。
• 降价：处理演示文稿内部降价的解析以及外部降价文档的加载。
• 数学：允许在reveal.js幻灯片中渲染数学方程。本质上是MathJax的薄包装。
• 笔记：处理reveal.js注释窗口的打开和同步。
• 搜索：处理在幻灯片中的任何位置查找文本字符串，并通过导航到该幻灯片并突出显示来向用户显示下一次出现的内容。
• 缩放：将放大/缩小动画应用于幻灯片

// Browser
instance.initialize({
  plugins: [ RevealMarkdown ]
});
 
// ES Module
instance.initialize({
  plugins: [ Markdown ]
});

7.在演示文稿中插入您自己的幻灯片并完成。

<div class="reveal">
  <div class="slides">
    <section>Slide 1</section>
    <section>
      <section>Vertical Slide 2-1</section>
      <section>Vertical Slide 2-2</section>
    </section>
    <section>Slide 3</section>
    ...
  </div>
</div>

8.或者使用Markdown编写内容。

<section data-markdown>
  <textarea data-template>
    Markdown Here
  </textarea>
</section>
 
<section data-markdown="example.md"
         data-separator="^\n\n\n"
         data-separator-vertical="^\n\n"
         data-separator-notes="^Note:"
         data-charset="iso-8859-15">
         Or load from an external Markdown file
</section>
 
<section data-markdown>
  <script type="text/template">
    - Fragment 1
    - Fragment 2
    - Fragment 3
  </script>
</section>
 
<section data-markdown>
  <script type="text/template">
  <!-- .slide: data-background="#ff0000" -->
    Markdown Here
  </script>
</section>

9.可用于自定义每张幻灯片的HTML数据属性。

<!-- Custom Background Color -->
<section 
  data-background-color="black">
  ...
</section>
 
<!-- Custom Background Image -->
<section 
  data-background-image="1.png" 
  data-background-size="100px" 
  data-background-repeat="repeat"
  data-background-position="center"
  data-background-opacity="1">
  ...
</section>
 
<!-- Gradient Background -->
<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
  ...
</section>
 
<!-- Custom Background Video -->
<section 
  data-background-video="1.mp4"
  data-background-size="cover"
  data-background-opacity="1"
  data-background-video-loop 
  data-background-video-muted>
  ...
</section>
 
<!-- Iframe Backgrounds -->
<section 
  data-background-iframe="https://jqueryscript.net"
  data-background-interactive>
</section>
 
<!-- Video Autoplay -->
<section>
  <video data-autoplay src="1.mp4"></video>
</section>
 
<!-- Lazy Load Media -->
<section>
  <img data-src="image.png">
  <iframe data-src="https://www.jqueryscript.net"></iframe>
  <video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
  </video>
</section>
 
<!-- Lazy Load Iframes -->
<section>
  <iframe data-src="https://www.jqueryscript.net" data-preload></iframe>
</section>
 
<!-- Source Code -->
<section>
  <pre>
    <code data-trim data-noescape data-line-numbers="3,8-10">
      ... code here
    </code>
  </pre>
</section>
 
<!-- Hidden Slides -->
<section data-visibility="hidden">
  Hidden Slide
</section>
 
<!-- Uncounted Slides -->
<section data-visibility="uncounted">
  Uncounted Slide
</section>
 
<!--Transitions -->
<section 
  data-transition="zoom"
  data-transition-speed="fast">
  ...
</section>
<section 
  data-transition="fade"
  data-transition-speed="slow">
  ...
</section>
<section data-transition="slide">
  ...
</section>
<section data-transition="convex">
  ...
</section>
<section data-transition="concave">
  ...
</section>
 
<!-- Autoplay -->
<section data-auto-animate>
  ...
</section>
 
<!-- Auto Slide -->
<section data-autoslide="2000">
  ...
</section>
 
<!-- Prevent Swipe -->
<section>
  <p data-prevent-swipe>
    Can't change slides by swiping across this element.
  </p>
</section>

10.用于自定义演示文稿的所有默认配置选项。

instance.initialize({
 
  // Display presentation control arrows
  controls: true,
 
  // Help the user learn the controls by providing hints, for example by
  // bouncing the down arrow when they first encounter a vertical slide
  controlsTutorial: true,
 
  // Determines where controls appear, "edges" or "bottom-right"
  controlsLayout: 'bottom-right',
 
  // Visibility rule for backwards navigation arrows; "faded", "hidden"
  // or "visible"
  controlsBackArrows: 'faded',
 
  // Display a presentation progress bar
  progress: true,
 
  // Display the page number of the current slide
  // - true:    Show slide number
  // - false:   Hide slide number
  //
  // Can optionally be set as a string that specifies the number formatting:
  // - "h.v":   Horizontal . vertical slide number (default)
  // - "h/v":   Horizontal / vertical slide number
  // - "c":   Flattened slide number
  // - "c/t":   Flattened slide number / total slides
  //
  // Alternatively, you can provide a function that returns the slide
  // number for the current slide. The function should take in a slide
  // object and return an array with one string [slideNumber] or
  // three strings [n1,delimiter,n2]. See #formatSlideNumber().
  slideNumber: false,
 
  // Can be used to limit the contexts in which the slide number appears
  // - "all":      Always show the slide number
  // - "print":    Only when printing to PDF
  // - "speaker":  Only in the speaker view
  showSlideNumber: 'all',
 
  // Use 1 based indexing for # links to match slide number (default is zero
  // based)
  hashOneBasedIndex: false,
 
  // Add the current slide number to the URL hash so that reloading the
  // page/copying the URL will return you to the same slide
  hash: false,
 
  // Flags if we should monitor the hash and change slides accordingly
  respondToHashChanges: true,
 
  // Push each slide change to the browser history.  Implies `hash: true`
  history: false,
 
  // Enable keyboard shortcuts for navigation
  keyboard: true,
 
  // Optional function that blocks keyboard events when retuning false
  //
  // If you set this to 'foucsed', we will only capture keyboard events
  // for embdedded decks when they are in focus
  keyboardCondition: null,
 
  // Disables the default reveal.js slide layout (scaling and centering)
  // so that you can use custom CSS layout
  disableLayout: false,
 
  // Enable the slide overview mode
  overview: true,
 
  // Vertical centering of slides
  center: true,
 
  // Enables touch navigation on devices with touch input
  touch: true,
 
  // Loop the presentation
  loop: false,
 
  // Change the presentation direction to be RTL
  rtl: false,
 
  // Changes the behavior of our navigation directions.
  //
  // "default"
  // Left/right arrow keys step between horizontal slides, up/down
  // arrow keys step between vertical slides. Space key steps through
  // all slides (both horizontal and vertical).
  //
  // "linear"
  // Removes the up/down arrows. Left/right arrows step through all
  // slides (both horizontal and vertical).
  //
  // "grid"
  // When this is enabled, stepping left/right from a vertical stack
  // to an adjacent vertical stack will land you at the same vertical
  // index.
  //
  // Consider a deck with six slides ordered in two vertical stacks:
  // 1.1    2.1
  // 1.2    2.2
  // 1.3    2.3
  //
  // If you're on slide 1.3 and navigate right, you will normally move
  // from 1.3 -> 2.1. If "grid" is used, the same navigation takes you
  // from 1.3 -> 2.3.
  navigationMode: 'default',
 
  // Randomizes the order of slides each time the presentation loads
  shuffle: false,
 
  // Turns fragments on and off globally
  fragments: true,
 
  // Flags whether to include the current fragment in the URL,
  // so that reloading brings you to the same fragment position
  fragmentInURL: true,
 
  // Flags if the presentation is running in an embedded mode,
  // i.e. contained within a limited portion of the screen
  embedded: false,
 
  // Flags if we should show a help overlay when the question-mark
  // key is pressed
  help: true,
 
  // Flags if it should be possible to pause the presentation (blackout)
  pause: true,
 
  // Flags if speaker notes should be visible to all viewers
  showNotes: false,
 
  // Global override for autolaying embedded media (video/audio/iframe)
  // - null:   Media will only autoplay if data-autoplay is present
  // - true:   All media will autoplay, regardless of individual setting
  // - false:  No media will autoplay, regardless of individual setting
  autoPlayMedia: null,
 
  // Global override for preloading lazy-loaded iframes
  // - null:   Iframes with data-src AND data-preload will be loaded when within
  //           the viewDistance, iframes with only data-src will be loaded when visible
  // - true:   All iframes with data-src will be loaded when within the viewDistance
  // - false:  All iframes with data-src will be loaded only when visible
  preloadIframes: null,
 
  // Can be used to globally disable auto-animation
  autoAnimate: true,
 
  // Optionally provide a custom element matcher that will be
  // used to dictate which elements we can animate between.
  autoAnimateMatcher: null,
 
  // Default settings for our auto-animate transitions, can be
  // overridden per-slide or per-element via data arguments
  autoAnimateEasing: 'ease',
  autoAnimateDuration: 1.0,
  autoAnimateUnmatched: true,
 
  // CSS properties that can be auto-animated. Position & scale
  // is matched separately so there's no need to include styles
  // like top/right/bottom/left, width/height or margin.
  autoAnimateStyles: [
    'opacity',
    'color',
    'background-color',
    'padding',
    'font-size',
    'line-height',
    'letter-spacing',
    'border-width',
    'border-color',
    'border-radius',
    'outline',
    'outline-offset'
  ],
 
  // Controls automatic progression to the next slide
  // - 0:      Auto-sliding only happens if the data-autoslide HTML attribute
  //           is present on the current slide or fragment
  // - 1+:     All slides will progress automatically at the given interval
  // - false:  No auto-sliding, even if data-autoslide is present
  autoSlide: 0,
 
  // Stop auto-sliding after user input
  autoSlideStoppable: true,
 
  // Use this method for navigation when auto-sliding (defaults to navigateNext)
  autoSlideMethod: null,
 
  // Specify the average time in seconds that you think you will spend
  // presenting each slide. This is used to show a pacing timer in the
  // speaker view
  defaultTiming: null,
 
  // Enable slide navigation via mouse wheel
  mouseWheel: false,
 
  // Opens links in an iframe preview overlay
  // Add `data-preview-link` and `data-preview-link="false"` to customise each link
  // individually
  previewLinks: false,
 
  // Exposes the reveal.js API through window.postMessage
  postMessage: true,
 
  // Dispatches all reveal.js events to the parent window through postMessage
  postMessageEvents: false,
 
  // Focuses body when page changes visibility to ensure keyboard shortcuts work
  focusBodyOnPageVisibilityChange: true,
 
  // Transition style
  transition: 'slide', // none/fade/slide/convex/concave/zoom
 
  // Transition speed
  transitionSpeed: 'default', // default/fast/slow
 
  // Transition style for full page slide backgrounds
  backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom
 
  // The maximum number of pages a single slide can expand onto when printing
  // to PDF, unlimited by default
  pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,
 
  // Prints each fragment on a separate slide
  pdfSeparateFragments: true,
 
  // Offset used to reduce the height of content within exported PDF pages.
  // This exists to account for environment differences based on how you
  // print to PDF. CLI printing options, like phantomjs and wkpdf, can end
  // on precisely the total height of the document whereas in-browser
  // printing has to end one pixel before.
  pdfPageHeightOffset: -1,
 
  // Number of slides away from the current that are visible
  viewDistance: 3,
 
  // Number of slides away from the current that are visible on mobile
  // devices. It is advisable to set this to a lower number than
  // viewDistance in order to save resources.
  mobileViewDistance: 2,
 
  // The display mode that will be used to show slides
  display: 'block',
 
  // Hide cursor if inactive
  hideInactiveCursor: true,
 
  // Time before the cursor is hidden (in ms)
  hideCursorTime: 5000
 
});

11.API方法。

// Navigate to a specific slide
Reveal.slide( indexh, indexv, indexf );
 
// Relative navigation
Reveal.left();
Reveal.right();
Reveal.up();
Reveal.down();
Reveal.prev();
Reveal.next();
 
// Fragment navigation
Reveal.prevFragment();
Reveal.nextFragment();
 
// Checks which directions we can navigate towards
// {top: false, right: true, bottom: false, left: false}
Reveal.availableRoutes();
 
// Call this if you add or remove slides to update controls, progress, etc
Reveal.sync();
 
// Call this to update the presentation scale based on available viewport
Reveal.layout();
 
// Randomize the order of slides
Reveal.shuffle();
 
// Returns the present configuration options
Reveal.getConfig();
 
// Fetch the current scale of the presentation
Reveal.getScale();
 
// Returns an object with the scaled presentationWidth & presentationHeight
Reveal.getComputedSlideSize();
 
// Coordinates of the slide (e.g. { h: 0, v: 0, f: 0 })
Reveal.getIndices(slide=currentSlide);  
 
// (0 == first slide, 1 == last slide)
Reveal.getProgress();                   
 
// Returns the speaker notes for the slide
Reveal.getSlideNotes(slide=currentSlide);
 
// Retrieves the previous and current slide elements
Reveal.getPreviousSlide();
Reveal.getCurrentSlide();
 
// Returns an all horizontal/vertical slides in the deck
Reveal.getHorizontalSlides();
Reveal.getVerticalSlides();
 
// Total number of slides
Reveal.getTotalSlides();
Reveal.getSlidePastCount();
 
// Array of all slides
Reveal.getSlides();
 
// Checks if the presentation contains two or more
// horizontal/vertical slides
Reveal.hasHorizontalSlides();
Reveal.hasVerticalSlides();
 
// Checks if the deck has navigated on either axis at least once
Reveal.hasNavigatedHorizontally();
Reveal.hasNavigatedVertically();
 
Reveal.isFirstSlide();
Reveal.isLastSlide();
Reveal.isVerticalSlide();
 
// Shows a help overlay with keyboard shortcuts, optionally pass true/false
// to force on/off
Reveal.toggleHelp();
 
// Toggle presentation states, optionally pass true/false to force on/off
Reveal.toggleOverview();
Reveal.toggleAutoSlide();
Reveal.togglePause();
 
Reveal.isOverview();
Reveal.isAutoSliding();
Reveal.isPaused();
 
// Retrieve key DOM elements
Reveal.getRevealElement();
Reveal.getSlidesElement();
Reveal.getViewportElement();
 
// load an external URL
Reveal.initialize({ url: 'https://example.com/my-reveal-presentation' })
 
// Destroy
Reveal.destroy();
 
// Plugin API
Reveal.hasPlugin( 'markdown' )
Reveal.getPlugin( 'markdown' )
Reveal.getPlugins()

12.事件。

Reveal.on('ready', event => {
  // event.currentSlide, event.indexh, event.indexv
});
 
Reveal.on('slidechanged', event => {
  // event.previousSlide, event.currentSlide, event.indexh, event.indexv
});
 
Reveal.on('slidetransitionend', event => {
  // event.currentSlide
});
 
Reveal.on('resize', event => {
  // event.scale, event.oldScale, event.size
});
 
Reveal.on('overviewshown', event => {
  // ...
});
 
Reveal.on('overviewhidden', event => {
  // ...
});
 
Reveal.on('fragmentshown', event => {
  // event.fragment
});
 
Reveal.on('fragmenthidden', event => {
  // event.fragment
});
 
Reveal.on('autoslideresumed', event => {
  // ...
});
 
Reveal.on('autoslidepaused', event => {
  // ...
});

更新日志：

版本4.5.0（2023-04-13）

• 添加对跳转到幻灯片的支持！
• 添加吸血鬼主题
• 添加两个新的高对比度主题：黑色对比度和白色对比度
• 将默认的lang属性添加到index.html
• 现在，通过一个新的.custom类和减少的特异性来定义自定义片段样式更容易了。
• Live reload现在可以处理子文件夹中的.html/.md文件

版本4.4.0（2022-10-17）

• 渐变幻灯片背景
• 如果为同一张幻灯片提供了多个单独的注释，它们现在都将显示在扬声器视图中
• 更新了浏览器目标，从>0.5%，IE 11，未停滞到>2%，未停滞
• 停止使用缩放来缩放演示文稿。Zoom产生了比CSS转换更清晰的放大效果，但它是一个非标准的CSS属性，有太多的怪癖
• 错误修正

第4.3.1版（2022-03-21）

• 修复了阻止扬声器视图从file://protocol工作的错误
• 修复试图从reveal.js以外的源解析postMessage事件的控制台错误
• 修复为MathJax3插件提供自己的配置的问题
• 修复ZIP包吞咽任务
• 替换不推荐使用的String.protype.substr（）

版本4.3.0（2022-02-28）

• 现在可以销毁/取消初始化reveal.js演示。这将删除所有事件侦听器，并回滚对DOM所做的所有更改。它还将注销所有插件，并在它们公开destroy方法时销毁它们。
• 现在，您可以为演示文稿提供一个绝对URL，该演示文稿应加载到扬声器视图中。如果您将演示文稿集成为网页的一部分，但仍希望扬声器视图正常工作，那么这将非常有用。
• 已修复Bugs

v4.2.0 (2021-11-14)

• 该数学插件现在支持三个排版库：KaTeX、MathJax 2和MathJax 3。
• 新事件：beforeslidechange（#3003）。这使得有条件地阻止导航成为可能。
• 导航时跳过片段的新键盘快捷键：alt+â/â/ã。
• 新的API选项用于在定向导航Reveal.right（{skipFragments:true}）中跳过片段。
• 向高亮显示插件添加beforeHighlight回调
• 代码行号现在可以从偏移量（#3050）开始。例如，此代码块将从10开始编号：＜code data ln start from＝“10”＞。
• 当缺少.show或.sslides容器时，可以更好地发送错误消息
• 错误修复程序

v4.1.2 (2021-06-09)

• 增加了对数据自动动画重启和数据自动动画id的支持。这些属性使您可以更好地控制哪些幻灯片应该在彼此之间自动设置动画
• 主题属性现在可以作为CSS变量使用，使其易于重写。
• 错误修复。

v4.1.1 (2021-05-21)

• 增加了对Node.js 16的支持。
• 数据背景图像现在接受多个图像。
• 新的Markdown配置选项animateLists自动将所有列表转换为阶梯片段。
• 将代码块中的选项卡大小从8减小到2。
• 更准确地计算单击进度条时要跳转到的幻灯片。
• 在导出到PDF时优化DOM交互并减少强制布局。
• 修正：当片段被隐藏时，片段内部的视频/音频现在停止播放。
• 修正了：Markdown现在被广告中默认的分隔符（---）分割成单独的幻灯片。
• 已修复：r-fit-text布局帮助程序现在可以在PDF导出中正确调整文本大小。
• 修复了某些幻灯片特定的转换被全局转换设置错误覆盖的问题。
• 已修复：has dark background helper类现在可以在使用命名颜色作为数据背景颜色时工作。

版本4.1.0（2020-10-12）

• 新增：将数据可见性=“隐藏”添加到幻灯片中，以将其隐藏在视图之外
• 新增：添加r-fit-text类，使文本节点尽可能大，而不会溢出幻灯片。
• 配置的幻灯片宽度/高度现在显示为CSS变量（--幻灯片宽度/--幻灯片高度）。
• shuffle配置选项现在也可以打乱垂直幻灯片。
• 现在，所有主题都将基于当前幻灯片背景颜色反转文本颜色。
• 在npm包中包含/css和/js。
• Bugfixed（错误修复）

版本4.0.2（2020-05-29）

• 启用JavaScript构建的缓存，使后续构建的速度提高约50%。
• 在自动滑动演示中，数据自动滑动属性现在优先于<video>持续时间的自动检测。
• 删除打印到PDF时过于热心的重置样式。
• Reveal.configure和Reveal.isReady现在在预先初始化的reval.js API中可用，以匹配v3.x行为。
• 切换到从CDN提供演示演示资产。
• 错误修复。

版本4.0.1（2020-05-25）

• 修复了将演讲者笔记打印为PDF时的问题
• 修复了同一页面上有多个自动动画演示文稿时不正确的自动动画

预览截图

漂亮 HTML演示库 reval.js