Maison > Article > interface Web > JavaScript implémente un carrousel hiérarchique d'images

JavaScript implémente un carrousel hiérarchique d'images

王林original: 2023-05-26 15:54:38609parcourir

Dans la conception Web, les carrousels d'images sont souvent utilisés comme méthode d'affichage importante sur la page. Afin d'améliorer l'expérience de navigation de l'utilisateur, nous avons besoin d'une méthode d'implémentation simple et efficace, et JavaScript est un bon choix pour implémenter des carrousels d'images. Cet article explique comment utiliser Javascript pour implémenter un carrousel hiérarchique d'images.

1. Brève description du principe

Le principe du carrousel hiérarchique d'images est d'afficher plusieurs images dans un certain ordre afin d'assurer une commutation transparente, les images doivent être affichées en couches, à chaque fois que vous changez. vous devez afficher l’image de la couche supérieure. Déplacez-vous vers le niveau inférieur pour obtenir un carrousel. Ensuite, nous implémenterons un carrousel hiérarchique d'images via javascript.

2. Étapes de mise en œuvre

1. Créer une structure HTML

Le carrousel d'images doit définir un élément conteneur pour contenir tous les éléments d'image. Ici, nous créons un élément div et spécifions son identifiant comme "conteneur".

<div id="container">
   <img src="img/1.jpg" alt="">
   <img src="img/2.jpg" alt="">
   <img src="img/3.jpg" alt="">
   ...
</div>

2. Définissez le style de l'élément conteneur

Afin d'afficher le carrousel en douceur, nous devons définir les attributs width, height et overflow:hidden pour l'élément conteneur.

#container{
  width:800px;
  height:500px;
  overflow:hidden;
}

3. Obtenez la largeur de l'élément image et du conteneur

Afin d'implémenter un carrousel hiérarchique d'images, nous devons obtenir la largeur de l'élément image et de l'élément conteneur. Pour obtenir des éléments d'image via javascript, vous pouvez utiliser la méthode document.getElementsByTagName() pour obtenir toutes les images du conteneur.

var container = document.getElementById("container");
var imgs = container.getElementsByTagName("img");
var imgWidth = container.offsetWidth;

4. Définir le style des éléments de l'image

Afin d'obtenir un affichage hiérarchique des images, nous devons absolument positionner les éléments de l'image et les afficher en couches. Placez la première image sur le calque supérieur, accumulez la valeur de l'attribut z-index des autres images et définissez les styles dans l'ordre.

for(var i=0;i<imgs.length;i++){
  if(i==0){
    imgs[i].style.zIndex = "10";
  }else{
    imgs[i].style.zIndex = "10"+i;
  }
  imgs[i].style.position = "absolute";
  imgs[i].style.top = 0;
  imgs[i].style.left = imgWidth*i +"px";
}

5. Paramètres des effets d'animation

Pour obtenir une transition fluide des images, des effets d'animation sont requis Ici, nous utilisons une minuterie javascript (setInterval) pour implémenter l'animation du carrousel. Dans le minuteur, nous déplaçons la première image et, une fois l'animation terminée, nous déplaçons la première image vers le dernier niveau d'affichage. Dans le même temps, en soustrayant un imgWidth de la valeur gauche des autres images, un mouvement globalement fluide vers la gauche est obtenu.

var index = 0;
setInterval(function(){
  var next = (index+1)%imgs.length;
  imgs[index].style.left = 0-imgWidth +"px";
  imgs[index].style.zIndex = "10";
  imgs[next].style.left = imgWidth*(imgs.length-1)+"px";
  imgs[next].style.zIndex = "100";
  index=next;
},3000);

3. Code complet

Le code final implémenté est le suivant :

<html>
<head>
<style>
#container{
  width:800px;
  height:500px;
  overflow:hidden;
}
#container img{
  width:800px;
  height:500px;
}
</style>
</head>
<body>
   <div id="container">
     <img src="img/1.jpg" alt="">
     <img src="img/2.jpg" alt="">
     <img src="img/3.jpg" alt="">
     <img src="img/4.jpg" alt="">
     <img src="img/5.jpg" alt="">
   </div>
   <script>
      var container = document.getElementById("container");
      var imgs = container.getElementsByTagName("img");
      var imgWidth = container.offsetWidth;
      for(var i=0;i<imgs.length;i++){
        if(i==0){
          imgs[i].style.zIndex = "10";
        }else{
          imgs[i].style.zIndex = "10"+i;
        }
        imgs[i].style.position = "absolute";
        imgs[i].style.top = 0;
        imgs[i].style.left = imgWidth*i +"px";
      }
      var index = 0;
      setInterval(function(){
        var next = (index+1)%imgs.length;
        imgs[index].style.left = 0-imgWidth +"px";
        imgs[index].style.zIndex = "10";
        imgs[next].style.left = imgWidth*(imgs.length-1)+"px";
        imgs[next].style.zIndex = "100";
        index=next;
      },3000);
   </script>
</body>
</html>

4 Résumé

L'utilisation de javascript pour implémenter un carrousel hiérarchique d'images peut améliorer l'effet d'affichage de la page et l'expérience de navigation de l'utilisateur. Cet article présente le principe et les étapes de mise en œuvre du carrousel hiérarchique d'images et fournit le code complet, j'espère qu'il sera utile à l'apprentissage et à l'application de chacun.

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：

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

Article précédent：Qu'est-ce que le div JavaScriptArticle suivant：Qu'est-ce que le div JavaScript

Articles Liés

Voir plus