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:38628parcourir
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!