ホームページ > 記事 > ウェブフロントエンド > JavaScriptでスライドショー効果を作成する方法
JavaScriptでスライドショー効果を作成する方法
- 清浅オリジナル
- 2019-02-16 13:17:265069ブラウズ
JavaScript のrevealjs フレームワークを通じてスライド効果を実現できます。section タグを使用して単一ページのスライドを作成し、そこにテキストと画像を追加できます
[推奨コース: JavaScript チュートリアル]
スライドの効果を実現するには、JavaScript 言語を使用する必要がありますフレームワーク:reveal.js フレームワーク 次に、この記事では、具体的な例を通してスライド効果を実現する方法を説明します。
reveal.js フレームワークの紹介
reveal .js フレームワークは、HTML コードを通じて美しいスライドショー効果を簡単に作成できるフレームワークです。私たちが日常業務で使用する PPT スライドと同じです。 replace.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 ページ内 2 つの div ブロックレベル要素。reveal クラス名と slides クラス名を使用する必要があることに注意してください。次に、div の 2 番目のレイヤーにセクション タグを作成して、各
以下に示すように:
<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でスライドショー効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。