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

Écrire des diaporamas en utilisant HTML et CSS

WBOY
Libérer: 2023-08-19 20:25:12
avant
1423 Les gens l'ont consulté

Écrire des diaporamas en utilisant HTML et CSS

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);}
}
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:tutorialspoint.com
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal