JavaScript implémente la lecture automatique des images

De nos jours, avec le développement continu de la technologie Internet, la conception de sites Web est devenue une industrie très importante. En tant qu'élément très important, les images sont souvent utilisées dans la conception de pages pour embellir la page, améliorer l'effet de transmission de l'information et attirer l'attention de l'utilisateur. La présentation de certains éléments dynamiques sur la page peut non seulement enrichir le contenu de la page, mais également offrir aux utilisateurs un effet sensoriel plus intuitif et une meilleure expérience utilisateur lors de la navigation. Cet article présentera comment JavaScript implémente la lecture automatique des images.

1. Principe du carrousel automatique

Le carrousel d'images, comme son nom l'indique, permet de lire et de changer automatiquement plusieurs images. Le principe du carrousel automatique est réalisé à l'aide du timer JavaScript : lorsque le nombre de pages du carrousel est déterminé, la fonction setInterval() est utilisée pour changer d'image régulièrement si le carrousel est infini, setTimeout() est utilisé pour l'implémenter ; appels récursifs pour obtenir l'effet carrousel.

2. Structure HTML

Pour implémenter un carrousel automatique, vous devez créer un conteneur en boucle et une image en HTML, comme suit :

<div class="carousel-container">
  <img src="images/pic1.png" alt="image 1">
  <img src="images/pic2.png" alt="image 2">
  <img src="images/pic3.png" alt="image 3">
</div>

3 . Style CSS

Définissez le style du conteneur du carrousel, comme suit :

.carousel-container{
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
}
.carousel-container img{
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.6s ease-in-out;
}
.carousel-container img.active{
  opacity: 1; 
}

4. JavaScript pour implémenter le carrousel

1. et le conteneur

var carouselContainer = document.querySelector('.carousel-container');
var carouselImgs = carouselContainer.querySelectorAll('img');

2. Initialisez le carrousel

Avant de démarrer le carrousel, vous pouvez ajouter un nom de classe "actif" à la première image et définir un index de compteur. image actuelle du carrousel pour faciliter le passage à l’image suivante à l’étape suivante.

var index = 0;
carouselImgs[index].classList.add('active');

3. Set timer

Dans le processus de carrousel, vous devez changer d'image à chaque fois. Voici deux implémentations Méthode : illimitée. carrousel et carrousel limité. La différence réside dans la nécessité ou non de redémarrer le parcours depuis le début une fois que toutes les images ont été parcourues.

Carrousel illimité :

setInterval(function(){
  index++;
  if(index >= carouselImgs.length){
    index = 0;
  }
  carouselImgs.forEach(function(img){
    img.classList.remove('active');
  });
  carouselImgs[index].classList.add('active');
}, 3000);

Carrousel limité :

var timer = setInterval(function(){
  index++;
  if(index >= carouselImgs.length){
    clearInterval(timer);
    return;
  }
  carouselImgs.forEach(function(img){
    img.classList.remove('active');
  });
  carouselImgs[index].classList.add('active');
}, 3000);

Comme vous pouvez le voir ici, en définissant l'index du compteur, vous pouvez vous assurer que chaque parcours atteint À la position correspondante, nous réglons une minuterie pour faire pivoter l’image suivante toutes les 3 secondes.

4. Ajouter un écouteur d'événement

Certains utilisateurs voudront peut-être cliquer sur l'image pour accéder à la page correspondante. Dans ce cas, nous devons ajouter un écouteur d'événement à l'image. .

carouselImgs.forEach(function(img){
  img.addEventListener('click', function(e){
    var targetURL = e.target.getAttribute('data-href');
    if(targetURL){
      window.location.href=targetURL;
    }
  });
});

Ici, nous surveillons le comportement de clic de l'utilisateur via la surveillance des événements, et obtenons le lien correspondant à l'image via la méthode "getAttribute()", afin qu'en cliquant sur l'image on accède à la page cible.

5. Résumé

Après les étapes ci-dessus, nous pouvons obtenir avec succès l'effet de rotation automatique de l'image. Cependant, il convient de noter que les images carrousel ne peuvent pas être utilisées sur toutes les pages. Seuls des scénarios et des conceptions appropriés peuvent produire de bons résultats. L'effet de carrousel d'images automatique obtenu grâce à la méthode ci-dessus présente également certaines limites. Lorsqu'il y a plusieurs images de carrousel sur la page en même temps, des conflits peuvent exister et affecter l'exécution du programme. Par conséquent, nous devons procéder à des ajustements et à des utilisations raisonnables dans des applications pratiques pour produire les meilleurs résultats.

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!