Comment obtenir un effet slide avec CSS ? Comment implémenter un diaporama (exemple de code)

Le contenu de cet article est de présenter comment obtenir l'effet slide avec CSS ? Comment implémenter un diaporama (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Ci-dessous, nous allons implémenter l'effet de commutation de diapositive (fondu entrant et sortant) étape par étape à travers le code :

1 Créez un fichier html et écrivez une démo

Nous devons d’abord configurer une liste d’images sur la page, contenues dans une boîte div. Quelque chose comme ceci :

<div id="stage">
	<a href="img/Comment obtenir un effet slide avec CSS ? Comment implémenter un diaporama (exemple de code)"><img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment obtenir un effet slide avec CSS ? Comment implémenter un diaporama (exemple de code)" ></a>
	<a href="img/2.jpg"><img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment obtenir un effet slide avec CSS ? Comment implémenter un diaporama (exemple de code)" ></a>
	<a href="img/3.jpg"><img  src="/static/imghw/default1.png"  data-src="img/3.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment obtenir un effet slide avec CSS ? Comment implémenter un diaporama (exemple de code)" ></a>
	<a href="img/4.jpg"><img  src="/static/imghw/default1.png"  data-src="img/4.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment obtenir un effet slide avec CSS ? Comment implémenter un diaporama (exemple de code)" ></a>
	<a href="img/5.jpg"><img  src="/static/imghw/default1.png"  data-src="img/5.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment obtenir un effet slide avec CSS ? Comment implémenter un diaporama (exemple de code)" ></a>
	<a href="img/6.jpg"><img  src="/static/imghw/default1.png"  data-src="img/6.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment obtenir un effet slide avec CSS ? Comment implémenter un diaporama (exemple de code)" ></a>
	<a href="img/7.jpg"><img  src="/static/imghw/default1.png"  data-src="img/7.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment obtenir un effet slide avec CSS ? Comment implémenter un diaporama (exemple de code)" ></a>
	<a href="img/8.jpg"><img  src="/static/imghw/default1.png"  data-src="img/8.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Comment obtenir un effet slide avec CSS ? Comment implémenter un diaporama (exemple de code)" ></a>
</div>

Dans cet exemple, toutes les images ont des liens, mais ce n'est pas obligatoire. Si vous supprimez le lien, il vous suffit de modifier certains CSS et JavaScript pour référencer « img » au lieu de « a ».

2. Utilisez CSS pour superposer des images

Voici le code CSS que nous avons utilisé pour la démo suivante :

#stage {
    margin: 1em auto;
    width: 382px;
    height: 292px;
  }

  #stage a {
    position: absolute;
  }
  #stage a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
  }

  #stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 4s;
    animation-duration: 1s;
    z-index: 20;
  }
  #stage a:nth-of-type(2) {
    z-index: 10;
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

Par ajout Avec le lien défini sur position:absolute, nous retirons toutes les images du flux de documents et les empilons ensemble. Nous devons ensuite spécifier une largeur et une hauteur pour la #stage afin de réserver de l'espace sur la page pour le diaporama. Ceci est égal aux dimensions de l'image plus le remplissage (10 px de chaque côté) et les bordures (1 px de chaque côté).

Ensuite, nous utilisons des sélecteurs nth-of-type() pour placer la première image en haut de la pile, la deuxième image à l'arrière de la pile et le reste des images masqués à l'écran.

Enfin, nous attribuons une image clé d'animation à l'image du haut, lui disant d'attendre 4 secondes avant de disparaître, en définissant l'opacité : 0. Il ne manque plus qu'un peu de JavaScript pour déplacer l'image en regard vers le bas de la pile afin que l'image suivante puisse apparaître et disparaître en séquence.

3. Utilisez JavaScript pour déclencher l'effet

Il suffit ici d'attribuer un gestionnaire d'événement à l'image qui est déclenchée à la fin de l'animation d'images clés. Il prend la photo la plus importante et la déplace vers l'arrière :

window.addEventListener("DOMContentLoaded", function(e) {
    var stage = document.getElementById("stage");
    var fadeComplete = function(e) { stage.appendChild(arr[0]); };
    var arr = stage.getElementsByTagName("a");
    for(var i=0; i < arr.length; i++) {
      arr[i].addEventListener("animationend", fadeComplete, false);
    }

  }, false);

La nouvelle image en haut assume désormais les attributs du nième de type(1), y compris l'animation d'image clé --fader, conformément au même ça vaut pour d'autres images.

Ça y est ! Pas de code volumineux, pas de plugins, pas de bibliothèques, juste quelques lignes de JavaScript vanille qui fonctionnent dans tous les navigateurs modernes.

4. Rendu :

Exécutez le code ci-dessus pour obtenir un simple diaporama avec fondu entrant et sortant :

Résumé : ce qui précède est l'effet de diapositive de fondu entrant et sortant obtenu dans cet article. Vous pouvez l'essayer vous-même pour approfondir votre compréhension. J'espère que cela sera utile à votre étude.

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!