扫一扫分享
reveal.js是一个能够帮助我们很轻易地使用html来创建漂亮的演示效果,也就是我们常见的PPT幻灯片。reveal.js不依赖其他任何javascript库,是一个独立的javascript插件库。它提供了多种幻灯片过渡效果,是一个非常棒的在线演示库。
reveal.js还拥有许多高级特性,完整安装,某些 reveal.js 的功能,像外部的Markdown和演讲注释,需要演示文稿运行在本地的一个web服务器上,因此需要在nodejs环境下运行,安装node.js以及grunt,稍微比较复杂。本文采用简单安装,结合本站实例,使用reveal.js实现演示文稿的功能。
首先需要引入reveal主要的css以及js文件
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/moon.css">
<script src="js/reveal.js"></script>
<div class="reveal">
<div class="slides">
<section>slide1</section>
<section>slide2</section>
</div>
</div>
<script>
Reveal.initialize({
// 是否在右下角展示控制条
controls: true,
// 是否显示演示的进度条
progress: true,
// 是否显示当前幻灯片的页数
slideNumber: 'c/t'
});
</script>
以上代码实现了可以允许右下角的控制条控制切换展示幻灯片、并显示演示幻灯片的进度条,以及显示幻灯片的页码。
手机预览