Comment obtenir un effet de rotation d'image avec javascript

Avec le développement d'Internet, les carrousels d'images sont devenus un élément indispensable de la conception Web. JavaScript est l'un des outils les plus importants lors de la mise en œuvre de la rotation d'images. Cet article explique comment utiliser Javascript pour implémenter un effet d'affichage de roue d'images simple mais puissant.

1. Principe de mise en œuvre

Le principe de base de la rotation des images est de changer en permanence les images affichées, offrant ainsi différentes expériences visuelles aux utilisateurs. Lorsque nous utilisons JavaScript pour implémenter la rotation d'images, nous pouvons le faire en suivant les étapes suivantes :

1 Stockez les images qui doivent être pivotées dans un tableau.

2. Obtenez le conteneur d'images et le bouton de contrôle via DOM.

3. Réglez la minuterie, changez continuellement les images affichées et modifiez l'état des boutons de commande.

2. Implémentation du code

Avant de commencer à écrire du code, jetons un coup d'œil à la structure HTML :

<img src="img/1.jpg" alt="img1"/>
<img src="img/2.jpg" alt="img2"/>
<img src="img/3.jpg" alt="img3"/>

<button class="btn active"></button>
<button class="btn"></button>
<button class="btn"></button>

Nous utilisons un conteneur div pour charger les images qui doivent être pivotées, et utilisons un autre conteneur div pour placer le bouton de contrôle de rotation.

Ensuite, nous utiliserons javascript pour implémenter les effets d'affichage des roues. Le code spécifique est le suivant :

var images = document.querySelectorAll('.img-container img'),

buttons = document.querySelectorAll('.btn'),
currentIndex = 0;

//Switch images
function switchImages(index) {

for (var i = 0; i < images.length; i++) {
    images[i].style.display = 'none';
    buttons[i].className = 'btn';
}
images[index].style.display = 'block';
buttons[index].className = 'btn active';

}

//Timer
setInterval (function () {

currentIndex = (currentIndex + 1) % images.length;
switchImages(currentIndex);

}, 3000);

Dans le code ci-dessus, nous obtenons les images et les boutons du carrousel qui doivent être affichés statiquement via querySelectorAll, et définissons une variable currentIndex pour enregistrer le numéro de série de l'image qui devrait être affiché actuellement. Dans la fonction switchImages pour changer d'image, nous définissons d'abord l'état de toutes les images et boutons sur « aucun » et sur l'état normal, puis réaffichons les images à afficher et modifions l'état des boutons correspondants en fonction de l'index des paramètres transmis. Enfin, définissez la fonction dans setInterval pour exécuter le changement d'image toutes les 3 secondes et augmentez la valeur currentIndex de 1 à chaque fois pour éviter une boucle infinie.

3. Optimisation et supplémentation

Le code ci-dessus peut déjà réaliser la fonction de base de la rotation d'image, mais nous pouvons également l'optimiser et la compléter. Par exemple, l'ajout de fonctions telles que des effets de transition ou des aperçus miniatures peut rendre l'affichage de la roue plus vivant, plus beau et plus pratique.

1. Ajouter des effets de transition

Nous pouvons ajouter des effets de transition aux images via l'attribut de transition de CSS3 Le code est le suivant :

.img-container img {

position: absolute;
top: 0;
left: 0;
transition: all ease-in-out .5s;

}
.img-container img.hide {.

opacity: 0;
z-index: 1;

}

Dans le code ci-dessus, nous définissons le style d'image sur un positionnement absolu et utilisons l'attribut de transition pour spécifier l'heure et l'effet de l'animation de transition. Ensuite, nous modifions le nom de classe de l'image précédemment masquée en « cacher » dans la fonction switchImages pour déclencher l'effet de transition CSS3. Notez qu'il faut retarder l'exécution du code qui modifie le style, sinon l'effet CSS3 ne prendra pas effet.

//Changer d'images
function switchImages(index) {

for (var i = 0; i < images.length; i++) {
    images[i].className = '';
    buttons[i].className = 'btn';
}
images[currentIndex].className = 'hide';
setTimeout(function() {
    images[index].className = 'show';
}, 100);
currentIndex = index;
buttons[currentIndex].className = 'btn active';

}

2. Ajouter un aperçu miniature

Nous pouvons également ajouter des aperçus miniatures au bouton de commande d'affichage de la roue pour permettre aux utilisateurs de visualiser les images qu'ils souhaitent afficher. Le code spécifique est le suivant :

//Créer un aperçu miniature
pour (var i = 0; i

buttons[i].style.backgroundImage = "url(" + images[i].src + ")";

}
//Événement de déplacement de la souris
pour (var j = 0; j < ; Buttons.length; j++) {

buttons[j].onmouseover = function(e) {
    var index = e.target.getAttribute('index');
    switchImages(index);
}

}

Dans le code ci-dessus, nous utilisons javascript pour définir l'image d'arrière-plan de chaque bouton du carrousel et utilisons l'événement de déplacement de la souris pour déclencher la fonction de changement d'image. Grâce à cette fonction, les utilisateurs peuvent visualiser directement les vignettes d'images à afficher sur le panneau de commande du carrousel, ce qui améliore l'expérience utilisateur.

4. Résumé

En réalisant des effets de rotation d'image via javascript, nous pouvons non seulement améliorer la beauté et la praticité des pages Web, mais également acquérir une compréhension approfondie de l'application de javascript dans le développement Web. Essayez d'utiliser le code décrit dans cet article pour ajouter un effet d'affichage de roue d'images à vos propres pages Web afin d'offrir aux utilisateurs une meilleure expérience.

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!