JavaScriptでスライドショー効果を作成する方法-jsチュートリアル-php.cn

JavaScriptでスライドショー効果を作成する方法

清浅

リリース： 2022-04-02 13:55:21

オリジナル

5008 人が閲覧しました

JavaScript のrevealjs フレームワークを通じてスライド効果を実現できます。section タグを使用して単一ページのスライドを作成し、そこにテキストと画像を追加できます

JavaScriptでスライドショー効果を作成する方法

[推奨コース: JavaScript チュートリアル]

スライドの効果を実現するには、JavaScript 言語を使用する必要がありますフレームワーク:reveal.js フレームワーク次に、この記事では、具体的な例を通してスライド効果を実現する方法を説明します。

reveal.js フレームワークの紹介

reveal .js フレームワークは、HTML コードを通じて美しいスライドショー効果を簡単に作成できるフレームワークです。私たちが日常業務で使用する PPT スライドと同じです。 replace.js は他の JavaScript ライブラリに依存しないフレームワークであり、独立した 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 ページ内 2 つの div ブロックレベル要素。reveal クラス名と slides クラス名を使用する必要があることに注意してください。次に、div の 2 番目のレイヤーにセクションタグを作成して、各

ごとに個別のスライドを生成します。 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>

ログイン後にコピー

効果の画像は次のとおりです:

JavaScriptでスライドショー効果を作成する方法