Maison > Article > interface Web > Écrire des diaporamas en utilisant HTML et CSS

Écrire des diaporamas en utilisant HTML et CSS

WBOYavant: 2023-08-19 20:25:121346parcourir

Généralement, le développeur utilise JavaScript pour ajouter le comportement au code HTML. Parfois, nous pouvons également ajouter un comportement au code HTML en utilisant CSS. Par exemple, nous pouvons créer un diaporama en utilisant HTML et CSS plutôt que d'utiliser JavaScript avec. HTML

Nous pouvons créer des images clés personnalisées pour animer les diapositives et créer un diaporama

Grammaire

Les utilisateurs peuvent créer des diaporamas en utilisant uniquement HTML et CSS en suivant la syntaxe ci-dessous.

.slides {
   width: calc(716px * 2);
   animation: slideShow 10s ease infinite;
}
@keyframes slideShow {
   30% {margin-left: 0px;}
   70% {margin-left: calc(-716px * 1);}
}

Dans la syntaxe ci-dessus, le div 'slides' contient plusieurs diapositives. Nous définissons la largeur du div « slides » en fonction du nombre total de diapositives qu'il contient. De plus, nous avons ajouté une animation au div du diaporama.

Dans les images clés du diaporama, nous modifions la valeur de la propriété CSS « margin-left » pour changer la diapositive.

Étapes

Étape 1 - Créez un élément div et donnez-lui un nom de classe « parent ».

Étape 2 – Créez un élément div imbriqué et donnez le nom de classe « slides ». De plus, créez plusieurs éléments div imbriqués avec le nom de classe « element » représentant les diapositives.

Étape 3 – Ajoutez également le contenu de la diapositive à l'élément div avec le nom de classe « element ».

Étape 4 – Maintenant, nous devons ajouter le code CSS pour le diaporama. Donnez la largeur et la hauteur fixes à l'élément div « parent ».

Étape 5 – Définissez la largeur et la hauteur fixes du div « élément », qui est notre diapositive.

Étape 6 – Pour la division « slides », calculez la largeur totale en fonction du nombre total de diapositives qu'elle contient, et ajoutez une animation « diaporama » pour une durée particulière.

Étape 7 – Créez une image clé « diaporama » qui devrait modifier la valeur de la propriété CSS « marge gauche » pour modifier les diapositives. De plus, nous avons réparti le pourcentage dans l'intervalle de 20, car nous avons 4 diapositives.

Exemple

Dans l'exemple ci-dessous, nous avons créé 4 diapositives différentes et ajouté du contenu textuel. De plus, nous avons utilisé le pseudo-sélecteur « n-ième enfant » pour sélectionner la nième diapositive et modifier sa taille de police et la couleur de son texte.

<html>
<head>
   <style>
      /* set the box for the slides */
      .parent { height: 300px; width: 600px; overflow: hidden;}
      /* set height and width for slide elements */
      .element {float: left; height: 500px; width: 716px; backgroundcolor: grey;}
      /* set the width of the slides div and animation. */
      .slides { width: calc(716px * 4); animation: slideShow 10s ease infinite;}
      /* changing the font size and text color for every slide */
      .element:nth-child(1) {font-size: 2rem; color: blue;}
      .element:nth-child(2) {font-size: 3rem; color: black;}
      .element:nth-child(3) {font-size: 4rem; color: green;}
      .element:nth-child(4) {font-size: 5rem; color: pink;}
      /* creating the animation for the slideShow */
      /* for more slides, users can take percentages accordingly. */
      @keyframes slideShow {
         20% {margin-left: 0px;}
         40% {margin-left: calc(-716px * 1);}
         60% {margin-left: calc(-716px * 2);}
         80% {margin-left: calc(-716px * 3);}
      }
   </style>
</head>
<body>
   <h2> Programming a slideshow using the <i> HTML and CSS </i> only </h2>
   <div class = "parent">
      <div class = "slides">
         <div class = "element">
            <h3 class = "content"> This is a slide 1. </h3>
         </div>
         <div class = "element">
            <h3 class = "content"> This is a slide 2. </h3>
         </div>
         <div class = "element">
            <h3 class = "content"> This is a slide 3. </h3>
         </div>
         <div class = "element">
            <h3 class = "content"> This is a slide 4. </h3>
         </div>
      </div>
   </div>
</body>
</html>

Dans la sortie, les utilisateurs peuvent voir le diaporama de 10 secondes.

Exemple

Dans l'exemple ci-dessous, nous ajoutons une image comme contenu du diaporama. De plus, nous définissons les dimensions de l’image à la taille réelle du div « élément ».

<html>
<head>
   <style>
      /* set the box for the slides */
      .parent { height: 300px; width: 600px; overflow: hidden;}
      /* set height and width for slide elements */
      .element {float: left; height: 500px; width: 716px; backgroundcolor: grey; }
      /* set the width of the slides div and animation. */
      .slides {width: calc(716px * 4); animation: slideShow 10s ease infinite;}
      img {width: 100%; height: 100%;}
      /* creating the animation for the slideshow */
      /* for more slides, users can take percentages accordingly. */
      @keyframes slideShow {
         20% {margin-left: 0px;}
         40% {margin-left: calc(-716px * 1);}
         60% {margin-left: calc(-716px * 2);}
         80% {margin-left: calc(-716px * 3);}
      }
   </style>
</head>
<body>
   <h2> Programming a slideshow using the <i> HTML and CSS </i> only </h2>
   <div class = "parent">
      <div class = "slides">
         <div class = "element">
            <img src = "https://www.stockvault.net/data/2011/05/31/124348/thumb16.jpg" alt = "image 1">
         </div>
         <div class = "element">
            <img src = "https://www.stockvault.net/data/2007/03/01/99589/thumb16.jpg" alt = "image 2">
         </div>
         <div class = "element">
            <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTxtApKDB3clf0BZYxgUlbGiYg7m-DwYlzYd9WXS5u3_K2MjeMZ-Yj3GpWdaNaGYej52l8&usqp=CAU"  alt = "image 3">
         </div>
         <div class = "element">
            <img src = "https://thumbs.dreamstime.com/b/mani%C3%A8re-par-les-racines-vertes-de-h%C3%AAtre-de-for%C3%AAt-arbres-en-nature-41019730.jpg" alt = "image 4">
         </div>
      </div>
   </div>
</body>
</html>

En sortie, les utilisateurs peuvent observer un diaporama d'images.

Conclusion

Les utilisateurs ont appris à créer des diaporamas en utilisant uniquement HTML et CSS. Cependant, il est recommandé d'utiliser JavaScript pour créer des diaporamas car nous pouvons le manipuler de manière plus flexible. Par exemple, si nous avons plus de 100 diapositives et devons créer un diaporama, le code CSS peut devenir plus complexe car nous devons ajouter des valeurs de pourcentage codées en dur dans les images clés pour animer le diaporama.

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：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Quelles catégories existe-t-il pour le fil d’Ariane dans Materialise CSS ?Article suivant：Quelles catégories existe-t-il pour le fil d’Ariane dans Materialise CSS ?

Articles Liés

Voir plus