幻灯片插件reveal.js

幻灯片的制作方法有很多，今天要介绍的是reveal.js。

一、优点

用reveal制作幻灯片的优点有哪些呢？

1、结构简单，以标签来分割页码

2、切换样式多样化（线形切换、三维切换、远近切换等）

3、采用zoom控制页面的自适应

4、切换事件的监听

二、实例

html结构代码：

<div class="reveal">
    <div class="slides">
        <section>Single Horizontal Slide</section>
        <section>
            <section>Vertical Slide 1</section>
            <section>Vertical Slide 2</section>
        </section>
    </div>
</div>

外面两个div层的class必须是这样的结构，

一个section代表一页，

第一级的section代表横向的页码

第二级的section代表竖向的页码

加载幻灯片效果js代码：

Reveal.initialize({
    // Display controls in the bottom right corner
    controls: true,
    // Display a presentation progress bar
    progress: true,
    // Push each slide change to the browser history
    history: false,
    // Enable keyboard shortcuts for navigation
    keyboard: true,
    // Enable touch events for navigation
    touch: true,
    // Enable the slide overview mode
    overview: true,
    // Vertical centering of slides
    center: true,
    // Loop the presentation
    loop: false,
    // Change the presentation direction to be RTL
    rtl: false,
    // Number of milliseconds between automatically proceeding to the
    // next slide, disabled when set to 0, this value can be overwritten
    // by using a data-autoslide attribute on your slides
    autoSlide: 0,
    // Enable slide navigation via mouse wheel
    mouseWheel: false,
    // Transition style
    transition: 'default', // 翻页效果default/cube/page/concave/zoom/linear/fade/none
    // Transition speed
    transitionSpeed: 'default', //翻页速度 default/fast/slow
    // Transition style for full page backgrounds
    backgroundTransition: 'default' // default/linear/none
});

翻页事件监听js:

Reveal.addEventListener( 'slidechanged', function( event ) {
    // event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );

还有很多加载参数和几个监听事件，可以参看github的文档说明

三、缺陷

我遇到的两个问题：

1、在我加载完section后，我修改了section中的一些内容，竖向排列第四页后的没有修改，我不知道是不是reveal中的缓冲加载的机制。

然后我就想这在上下左右的事件中将后面页码中的内容进行修改，修改成功可是，在事件中进行修改后幻灯片特效却没了，小纠结了下。

2、在我一台电脑上无三维切换效果，换台电脑就可三维效果切换。无三维效果的是chrome的29版本，按说应该不会有问题才对。

四、传送门

总的来说这个幻灯片效果还是不错的，继续关注看看我的问题是否可以解决。

git传送门

官方演示地址