Comment créer un effet diaporama avec javascript

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.

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

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

Copier après la connexion

L'image de l'effet est la suivante :

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

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!