javascript怎样制作幻灯片结果-百分百源码网

javascript怎样制作幻灯片结果

发布时间：09/01 来源：未知浏览：关键词：

我们可以通过javascript中的revealjs框架来实现幻灯片的结果，可通过section标签来创立单页幻灯片并且在其中增加文字和图片

今天将要和大家分享的是通过JavaScript代码来实现幻灯片的结果，具有必然的参照价值，但愿对大家有所帮忙

【引荐课程：JavaScript教程】

使用JavaScript说话来实现幻灯片的结果就需要使用到一个框架：reveal.js框架，接下来在文章中将通过详细实例为大家讲解怎样实现幻灯片结果

reveal.js框架介绍

reveal.js框架是一个能够帮忙我们很轻易地通过HTML代码来创立美丽的幻灯片结果。跟我们在日常工作中所用到的PPT幻灯片一样。reveal.js是一个不依靠于其他任何javascript库的框架，可以说它是一个独立的javascript插件库。它供给了多种幻灯片过渡结果，是一个非常棒的演示框架。

reveal.js框架下载地址：https://github.com/hakimel/reveal.js

（1）下载reveal.js框架并引入到html文件中

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href=".\reveal.js-master\css\reveal.css">
  <!-- 引入主题 -->
  <link rel="stylesheet" href=".\reveal.js-master\css\theme\moon.css">
  <!-- 用于显示代码高亮 -->
  <link rel="stylesheet" href=".\reveal.js-master\lib\css\zenburn.css">
</head>
<body>
  <script type="text/javascript" src=".\reveal.js-master\js\reveal.js"></script>
</body>
</html>

（2）外部文件引入之后开端创立幻灯片

第一在html页面中创立两个div块级元素，留意必需要使用reveal和slides类名。然后在第二层div中创立section标签用于生成幻灯片页面，每一个<section>都会生成一张独自的幻灯片。HTML页面构建完之后还需要在js代码中对页面停止初始化。这样一个简易的幻灯片结果就做好了

如下所示：

<div class="reveal" style="width:450px;height:300px;border: 1px solid #fff;margin:250px auto;">
    <div class="slides">
      <section>
        <h1>幻灯片1</h1>
        <p>幻灯片正文</p>
      </section>
      <section>
        <h1>幻灯片2</h1>
        <p>幻灯片正文</p>
      </section>
    </div>
  </div>
<script type="text/javascript" src="./reveal.js-master/js/reveal.js"></script>
<script type="text/javascript">Reveal.initialize();</script>

结果图如下：