Utiliser JavaScript pour obtenir un effet carrousel d'images

JavaScript est un langage de script populaire qui peut être utilisé pour obtenir divers effets dynamiques, notamment des effets de carrousel d'images. Dans cet article, je vais vous montrer comment créer un effet carrousel d'images à l'aide de JavaScript. Cet article sera divisé en trois parties suivantes :

1. Préparation du HTML et CSS
2. Ecriture du code JavaScript
3. Implémentation de l'effet carrousel d'images

Préparation du HTML et CSS

Notre effet carrousel d'images nécessite un frame HTML , comme indiqué ci-dessous :

<div class="slider">
    <ul class="slides">
        <li><img src="image1.jpg"></li>
        <li><img src="image2.jpg"></li>
        <li><img src="image3.jpg"></li>
        <li><img src="image4.jpg"></li>
    </ul>
</div>

Sur cette base, nous avons besoin de certains styles CSS pour donner au cadre un certain style et une certaine mise en page, comme indiqué ci-dessous :

.slider {
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.slides {
    display: flex;
    list-style: none;
    height: 100%;
    margin: 0;
    padding: 0;
}
.slides li {
    flex: 1;
}
.slides img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Écriture de code JavaScript

Nous devons d'abord définir certaines variables et constantes pour stockez notre carrousel d'images et notre statut de glissement, comme indiqué ci-dessous :

const slides = document.querySelectorAll('.slides li');
const slider = document.querySelector('.slider');
const next = document.querySelector('.next');
const prev = document.querySelector('.prev');
const auto = true; // 是否自动播放
const intervalTime = 5000; // 图片切换时间间隔
let slideInterval;
let slideIndex = 0; // 当前图片索引

Ensuite, nous devons écrire des fonctions pour obtenir l'effet carrousel d'images. Voici un exemple de fonction :

function nextSlide() {
    slides[slideIndex].classList.remove('active');
    slideIndex = (slideIndex + 1) % slides.length;
    slides[slideIndex].classList.add('active');
}

Cette fonction supprimera la classe "active" de l'image actuelle, ajoutera la classe "active" de l'image suivante et augmentera l'index de l'image actuelle de 1, ce qui implémentera notre diffusion de roue d'images effet.

Ensuite, nous devons écrire une autre fonction pour gérer la fonction de lecture automatique :

function startSlide() {
    if (auto) {
        slideInterval = setInterval(nextSlide, intervalTime);
    }
}

Cette fonction vérifiera si nous devons lire automatiquement l'image, et si c'est le cas, elle appellera la fonction nextSlide que nous venons d'écrire après un certain intervalle.

Enfin, nous devons également écrire deux fonctions qui gèrent les événements de clic pour permettre aux utilisateurs de changer d'image manuellement :

function pauseSlide() {
    clearInterval(slideInterval);
}

function clickPrev() {
    pauseSlide();
    slides[slideIndex].classList.remove('active');
    slideIndex--;
    if (slideIndex < 0) {
        slideIndex = slides.length - 1;
    }
    slides[slideIndex].classList.add('active');
}
function clickNext() {
    pauseSlide();
    nextSlide();
}

Ces fonctions représentent à leur tour les fonctions de pause de la lecture automatique, de passage à l'image précédente et de passage à l'image suivante. .

Implémentation de l'effet carrousel d'images

Maintenant, nous avons tous les codes HTML, CSS et JavaScript prêts. Mettons tout ce code dans le même fichier HTML, puis ouvrons-le et voyons l'effet !

Nous pouvons changer d'image en cliquant sur les flèches gauche et droite ou en utilisant la fonction de lecture automatique. Nous pouvons également personnaliser le style, la position et la taille de ces flèches en fonction de nos besoins.

Résumé

Dans cet article, nous avons appris à utiliser JavaScript pour implémenter un simple effet carrousel d'images. En cours de route, nous avons appris à gérer divers événements et états, créant ainsi une expérience utilisateur dynamique et fluide. Si vous souhaitez des effets plus dynamiques similaires à l'effet carrousel d'images, je vous recommande d'apprendre en profondeur la programmation JavaScript, son potentiel créatif est illimité !

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!