Effet de lecture d'image carrousel simple implémenté par JavaScript et CSS (code source joint)

Les carrousels sont souvent au centre de l'attention, utilisés dans les galeries de photos ou occupant une grande place sur de nombreux sites Web contemporains. Alors qu'Adobe Flash a souvent été l'outil de choix pour travailler avec CSS3 et JavaScript dans le passé, les carrousels peuvent être facilement implémentés sans beaucoup de code.

La technique que j'utilise ici est l'un des moyens les plus simples d'implémenter un carrousel simple avec une belle transition en fondu en utilisant JavaScript et CSS3 standards.

Le HTML de base est trivial. Mettez simplement quelques images dans un conteneur div :

<div class="slides">
  <img  src="image/cup.jpg"  alt="Effet de lecture d'image carrousel simple implémenté par JavaScript et CSS (code source joint)" >
  <img  src="image/flower.jpg" alt="Effet de lecture d'image carrousel simple implémenté par JavaScript et CSS (code source joint)" >
  <img  src="image/flowers.jpg" alt="Effet de lecture d'image carrousel simple implémenté par JavaScript et CSS (code source joint)" >
  <img  src="image/strawberry.jpg" alt="Effet de lecture d'image carrousel simple implémenté par JavaScript et CSS (code source joint)" >
  <img  src="image/greatwall.jpg" alt="Effet de lecture d'image carrousel simple implémenté par JavaScript et CSS (code source joint)" >
</div>

Utilisez CSS pour empiler toutes les images à l'intérieur du conteneur et définir des transitions (des préfixes spécifiques au navigateur peuvent devoir être utilisés pour les transitions) :

/* the slide container with a fixed size */
.slides {
  box-shadow: 0px 0px 6px black;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  position: relative;
  }
  /* the images are positioned absolutely to stack. opacity transitions are animated. */
  .slides img { 
  display: block;
  position: absolute; 
  transition: opacity 1s;
  opacity: 0;
  width: 100%;
  }
  /* the first image is the current slide. it's faded in. */
  .slides img:first-child { 
  z-index: 2; 
  /* frontmost */
  opacity: 1;
  }
  /* the last image is the previous slide. it's behind the current slide and it's faded over. */
  .slides img:last-child {
  z-index: 1; 
  /* behind current slide */
  opacity: 1;
  }

Après cette configuration simple, il ne reste plus qu'à changer l'ordre du carrousel pour faire avancer le spectacle du carrousel. L'extrait de code suivant déplace périodiquement la première image (l'image actuelle) vers la fin du conteneur, faisant de l'image suivante l'image actuelle. En raison des règles CSS définies ci-dessus, les modifications s'animent avec un fondu enchaîné.

function nextSlide() {
    var q = function(sel) {
     return document.querySelector(sel); 
     }   
    q(".slides").appendChild(q(".slides img:first-child"));
    }
    setInterval(nextSlide, 3000)

Ce qui précède est l'analyse des étapes. Ce qui suit est le code complet

	
	
	


<div class="slides">
  <img  src="image/cup.jpg"  alt="Effet de lecture d'image carrousel simple implémenté par JavaScript et CSS (code source joint)" >
  <img  src="image/flower.jpg" alt="Effet de lecture d'image carrousel simple implémenté par JavaScript et CSS (code source joint)" >
  <img  src="image/flowers.jpg" alt="Effet de lecture d'image carrousel simple implémenté par JavaScript et CSS (code source joint)" >
  <img  src="image/strawberry.jpg" alt="Effet de lecture d'image carrousel simple implémenté par JavaScript et CSS (code source joint)" >
  <img  src="image/greatwall.jpg" alt="Effet de lecture d'image carrousel simple implémenté par JavaScript et CSS (code source joint)" >
</div>

L'effet est le suivant :

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!