Comment écrire une image de carrousel javascript js

L'implémentation du graphique carrousel JavaScript peut utiliser du code JavaScript natif ou référencer certaines bibliothèques tierces matures (telles que jQuery, etc.).

Prenons le code JavaScript natif comme exemple pour présenter comment implémenter un graphique carrousel JavaScript.

Première étape : structure HTML

Tout d'abord, nous devons définir la structure du carrousel en HTML, y compris les conteneurs d'images, les flèches gauche et droite, les boutons de navigation, etc. Par exemple :

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
  <div class="slider-prev"></div>
  <div class="slider-next"></div>
  <div class="slider-dots">
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
    <span class="slider-dot"></span>
  </div>
</div>

où, slider-container是轮播图的容器，slider-wrapper是图片容器，slider-prev和slider-next是左右箭头，slider-dots和slider-dot est le bouton de navigation.

Étape 2 : Style CSS

Ensuite, nous devons définir le style de l'image du carrousel, y compris la largeur, la hauteur, la position, etc. du conteneur, la disposition et la taille de l'image, le style du bouton de navigation , etc.

.slider-container {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}

.slider-wrapper {
  position: absolute;
  width: 2400px;
  height: 400px;
  left: 0;
  top: 0;
}

.slider-wrapper img {
  float: left;
  width: 800px;
  height: 400px;
}

.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background-image: url("arrow.png");
  background-repeat: no-repeat;
  background-size: 40px auto;
  cursor: pointer;
}

.slider-prev {
  left: 20px;
  transform: rotate(180deg);
}

.slider-next {
  right: 20px;
}

.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.slider-dot {
  display: inline-block;
  margin: 0 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.slider-dot.active {
  background-color: #f90;
}

Ci-dessus sont quelques exemples de styles simples. Bien sûr, les styles spécifiques peuvent être ajustés en fonction de vos besoins.

Étape 3 : Code JavaScript

Commencez maintenant à écrire du code JavaScript pour obtenir l'effet du carrousel. Nous devons d'abord obtenir la référence de chaque élément, par exemple :

var container = document.querySelector('.slider-container');
var wrapper = document.querySelector('.slider-wrapper');
var prev = document.querySelector('.slider-prev');
var next = document.querySelector('.slider-next');
var dots = document.querySelectorAll('.slider-dot');

Ensuite, nous devons définir quelques paramètres et variables, par exemple :

var index = 0;  // 当前图片的索引
var interval = 3000;  // 切换时间间隔（3秒）
var timer = null;  // 定时器

Ensuite, nous devons écrire quelques fonctions pour implémenter les fonctions de base du carrousel :

Changer d'images :

function changeImage() {
  wrapper.style.transform = 'translateX(-' + index * 800 + 'px)';
  for (var i = 0; i < dots.length; i++) {
    dots[i].classList.remove(&#39;active&#39;);
  }
  dots[index].classList.add(&#39;active&#39;);
}

Auto-switch:

function autoPlay() {
  timer = setInterval(function() {
    index++;
    if (index >= dots.length) {
      index = 0;
    }
    changeImage();
  }, interval);
}

Arrêter l'auto-switch:

function stopAutoPlay() {
  clearInterval(timer);
}

Gérer l'événement clic du bouton de navigation:

for (var i = 0; i < dots.length; i++) {
  dots[i].addEventListener(&#39;click&#39;, function() {
    index = this.getAttribute(&#39;data-index&#39;);
    changeImage();
    stopAutoPlay();
  });
}

Gérer l'événement clic des flèches gauche et droite:

prev.addEventListener('click', function() {
  index--;
  if (index < 0) {
    index = dots.length - 1;
  }
  changeImage();
  stopAutoPlay();
});

next.addEventListener(&#39;click&#39;, function() {
  index++;
  if (index >= dots.length) {
    index = 0;
  }
  changeImage();
  stopAutoPlay();
});

Enfin, nous démarrons le changement automatique une fois la page chargée :

window.addEventListener('load', function() {
  autoPlay();
});

Pour résumer, voici les étapes pour implémenter un simple graphique carrousel JavaScript. Bien entendu, davantage de fonctions peuvent être étendues en fonction des besoins, telles que les effets de fondu d'entrée et de sortie, le chargement paresseux, la mise en page réactive, etc.

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!