转：https://blog.csdn.net/qq_37954086/article/details/80541224
1、准备工作
-
下载插件，插件下载地址：https://github.com/hakimel/reveal.js
-
解压文件，将相关的js以及css引入html界面
- 代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>reveal.js</title> <!-- reveal基本的css --> <link rel="stylesheet" href="revealmaster/css/reveal.css"> <!-- 引入黑色主题 --> <link rel="stylesheet" href="revealmaster/css/theme/black.css"> <!-- 用于显示代码高亮 --> <link rel="stylesheet" href="revealmaster/lib/css/zenburn.css"> </head> <body> <!-- reveal基本的js，里面集成了一些转场动画 --> <script src="revealmaster/js/reveal.js"></script> <!-- 这里省略引入css代码，记得加上 --> <div class="reveal"> <!-- 所有的幻灯片都放在一个类为slides的div中 --> <div class="slides"> <!-- 每一个<section>块都生成一张单独ppt --> <section> <!-- ppt标题 --> <h1>How to use jQuery</h1> <!-- ppt正文 --> <p> <small>Presented by <a href="">MayanDev</a></small> </p> </section> <!-- 以上Section第一页及内容 --> <!-- 第二页 --> <section> <!-- section中还可以包含section，放映的方式为向下放映 --> <section> <h2>Hello There</h2> <!-- fragment类表示分条显示，当键盘按下?键时触发 --> <p class="fragment">Today, we are gonna talk about the jQuery.</p> <!-- 添加一个图片链接 --> <a class="fragment" href="http://jquery.com/download/"><img width="240" height="180" data-src="images/ztreefresh.gif" alt="jquery_logo"></a> </section> <!-- 通过data-background熟悉可以设置幻灯片的背景颜色或者图片，甚至可以使用视频当作背景 --> <section data-background="#dddddd"> <h2>But then, Believe me...</h2> <p class="fragment">You need some HTML,CSS and JavaScript skills to be able to use jQuery effectively. </section> </section> </div> </div> <!-- 这里省略引入js代码，记得加上 --> <script type="text/javascript"> // 初始化页面 //Reveal.initialize(); </script> <script type="text/javascript"> // 初始化页面 Reveal.initialize({ controls: true, // 是否显示左下角的控制键，默认为true progress: true, // 是否显示进度条，默认为true center: true, // 是否在中间显示，默认为true // transition为页之间的切换动画，默认为slide，即水平滑动，这里我们改成zoom缩放试试 transition: 'zoom', // none/fade/slide(default)/convex/concave/zoom }); </script> </body> </html>
2.效果：
