reveal.js实现在线ppt演示文档插件-BFW插件库

reveal.js实现在线ppt演示文档插件

reveal.js 是一款好用的web在线文档演示js插件，实现在线ppt效果,支持转场动画效果设置，主题设置、放大、markdown、代码高亮，pdf导出等功能，非常强悍，今天我来大家入门一下。

使用方式：

首先准备html

<div class="reveal">
        <div class="slides">
            <section>
                <h1>slide1</h1>
                <img src='//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png' />
            </section>
            <section>
                <h1>slide2</h1>
                <img src='//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png' />
            </section>
            <section>
                <h1>slide3</h1>
                <img src='//repo.bfw.wiki/bfwrepo/image/5d653a3d2a1fe.png' />
            </section>
            <section>
                <h1>slide4</h1>
                <img src='//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png' />
            </section>
            <section>
                <h1>slide5</h1>
                   <img src='//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png' />
            </section>
        </div>
    </div>

引入bfwone

   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>

use插件及css和主题css

    <script type="text/javascript">

        bready(function() {
            use(["reveal", "reveal"], function() {
                Reveal.initialize({
                    // 是否在右下角展示控制条
                    controls: true,
                    // 是否显示演示的进度条
                    progress: true,
                    // 是否显示当前幻灯片的页数
                    slideNumber: 'c/t',
                    transition: "concave",
                    mouseWheel:true
                });
            });
        });
    </script>

reveal的配置选项

参数	描述	默认值
controls	是否在右下角展示控制条	true
progress	是否显示演示的进度条	true
slideNumber	是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。	false
history	是否将每个幻灯片改变加入到浏览器的历史记录中去	false
keyboard	是否启用键盘快捷键来导航	true
overview	是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式	true
center	是否将幻灯片垂直居中	true
touch	是否在触屏设备上启用触摸滑动切换	true
loop	是否循环演示	false
rtl	是否将演示的方向变成RTL，即从右往左	false
fragments	全局开启和关闭碎片。	true
autoSlide	两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖	0
transition	切换过渡效果，有none/fade/slide/convex/concave/zoom	'default'
transitionSpeed	过渡速度，default/fast/slow	'default'
mouseWheel	是否启用通过鼠标滚轮来切换幻灯片	true

完整的代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">

        bready(function() {
            use(["reveal", "reveal"], function() {
                Reveal.initialize({
                    // 是否在右下角展示控制条
                    controls: true,
                    // 是否显示演示的进度条
                    progress: true,
                    // 是否显示当前幻灯片的页数
                    slideNumber: 'c/t',
                    transition: "concave",
                    mouseWheel:true
                });
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <div class="reveal">
        <div class="slides">
            <section>
                <h1>slide1</h1>
                <img src='//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png' />
            </section>
            <section>
                <h1>slide2</h1>
                <img src='//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png' />
            </section>
            <section>
                <h1>slide3</h1>
                <img src='//repo.bfw.wiki/bfwrepo/image/5d653a3d2a1fe.png' />
            </section>
            <section>
                <h1>slide4</h1>
                <img src='//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png' />
            </section>
            <section>
                <h1>slide5</h1>
                   <img src='//repo.bfw.wiki/bfwrepo/image/5d6539c1971b8.png' />
            </section>
        </div>
    </div>
</body>
</html>

完整的示例可在webide中打开

http://project.bfw.wiki/project/15730929124282170049.html