How to create slideshow effect with javascript-JS Tutorial-php.cn

How to create slideshow effect with javascript

清浅

Release： 2022-04-02 13:55:21

Original

5138 people have browsed it

We can achieve the slide effect through the revealjs framework in javascript. We can create a single-page slide through the section tag and add text and pictures to it

How to create slideshow effect with javascript

[Recommended course: JavaScript Tutorial】

You need to use JavaScript language to achieve the effect of slides A framework: reveal.js framework. Next, in the article, I will explain how to achieve the slide effect through specific examples

reveal.js framework introduction

reveal. js framework is a framework that can help us easily create beautiful slideshow effects through HTML code. It is the same as the PPT slides we use in our daily work. reveal.js is a framework that does not depend on any other javascript library. It can be said to be an independent javascript plug-in library. It provides a variety of slide transition effects and is a great presentation framework.

How to create slideshow effect with javascript

reveal.js framework download address: https://github.com/hakimel/reveal.js

(1) Download reveal. js framework and introduce it into the html file

<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>

Copy after login

(2) Start creating the slideshow after the external file is introduced

First create it in the html page Two div block-level elements. Note that the reveal and slides class names must be used. Then create a section tag in the second layer of div to generate a slide page. Each

will generate a separate slide. After the HTML page is built, the page needs to be initialized in the js code. Such a simple slide effect is ready

As shown below:

<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>

Copy after login

The effect picture is as follows:

How to create slideshow effect with javascript

In the code, a section is a slide. If you put another section into the section, it will be displayed in a vertical slide, as shown in the figure below

How to create slideshow effect with javascript

We can also add text, pictures, etc. to the slides according to the effects we want. The color, style, etc. of the slides can be changed

Summary: The above is all the content of this article. I hope this article can help everyone learn to use JavaScript to create slide effects

The above is the detailed content of How to create slideshow effect with javascript. For more information, please follow other related articles on the PHP Chinese website!