Maison > Article > interface Web > Comment créer un effet diaporama avec javascript

Comment créer un effet diaporama avec javascript

清浅original: 2019-02-16 13:17:265076parcourir

Nous pouvons obtenir l'effet de diapositive grâce au framework révélationjs en javascript. Nous pouvons utiliser la balise section pour créer une diapositive d'une seule page et y ajouter du texte et des images

[Cours recommandés : Tutoriel JavaScript]

Vous devez utiliser le langage JavaScript pour obtenir l'effet des diapositives Un framework : le framework révélation.js. Ensuite, dans l'article, nous expliquerons comment obtenir l'effet slide à travers des exemples précis

Introduction au framework révélation.js

reveal.js framework est un framework qui peut nous aider à créer facilement de superbes effets de diaporama via du code HTML. C'est la même chose que les diapositives PPT que nous utilisons dans notre travail quotidien. révélation.js est un framework qui ne dépend d'aucune autre bibliothèque javascript. On peut dire qu'il s'agit d'une bibliothèque de plug-ins javascript indépendante. Il fournit une variété d’effets de transition de diapositives et constitue un excellent cadre de présentation.

Comment créer un effet diaporama avec javascript

Adresse de téléchargement du framework reveal.js : https://github.com/hakimel/reveal.js

(1) Télécharger la révélation. js et introduisez-le dans le fichier 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) Une fois le fichier externe introduit, commencez à créer la diapositive

D'abord sur la page HTML, créez deux éléments de niveau bloc div dans . Notez que les noms de classe révélation et diapositives doivent être utilisés. Créez ensuite une balise de section dans la deuxième couche de div pour générer une page de diapositive. Chaque

Une fois la page HTML créée, la page doit être initialisée dans le code js. Un effet de diaporama aussi simple est prêt

comme indiqué ci-dessous :

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

L'image de l'effet est la suivante :

Comment créer un effet diaporama avec javascript

Dans le code, une section est une page de diapositives. Si vous insérez une autre section dans la section, elle sera affichée sous forme de diapositive verticale, comme le montre la figure ci-dessous

Comment créer un effet diaporama avec javascript

Nous pouvons également ajouter du texte, des images, etc. aux diapositives selon les effets que nous souhaitons. La couleur, le style, etc. des diapositives peuvent être modifiés

Résumé : ce qui précède est tout le contenu de cet article. J'espère que cet article pourra aider tout le monde à apprendre à utiliser JavaScript pour créer des effets de diapositives

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser la méthode unshiftArticle suivant：Comment utiliser la méthode unshift

Articles Liés

Voir plus