Comment faire pivoter des images en javascript

JavaScript est un langage de programmation populaire capable d'afficher dynamiquement le contenu des pages Web. Dans la conception Web, la rotation des images est un élément important pour augmenter l’interactivité et l’attrait d’une page. Ce qui suit explique comment utiliser JavaScript pour obtenir l'effet de rotation d'image.

1. Préparation du HTML et du CSS

Dans le fichier HTML, nous devons d'abord définir un conteneur d'image et utiliser les structures de balises ul et li pour écrire du code. La balise ul représente le conteneur d'image et la balise li représente l'image. Comme indiqué ci-dessous :

<div id="slider">
  <ul>
    <li><img src="path/to/image1.jpg"></li>
    <li><img src="path/to/image2.jpg"></li>
    <li><img src="path/to/image3.jpg"></li>
  </ul>
</div>

Dans le fichier CSS, nous devons définir le style du conteneur d'image et de l'image, y compris la largeur, la hauteur, la position et d'autres attributs, et utiliser l'attribut overflow:hidden pour masquer le contenu à l'extérieur du conteneur et afficher uniquement la pièce dans la plage spécifiée. Comme indiqué ci-dessous :

#slider {
   width: 600px;
   height: 400px;
   position: relative;
   overflow: hidden;
 }
 
 #slider ul {
   position: absolute;
   list-style: none;
   margin: 0;
   padding: 0;
   width: 300%;
 }
 
 #slider ul li {
   float: left;
   width: 33.33%;
   height: 400px;
 }

 #slider ul li img {
   width: 100%;
   height: 100%;
   display: block;
 }

2. Implémentation de JavaScript

En JavaScript, nous devons faire fonctionner le conteneur d'images pour obtenir l'effet de rotation de l'image. On peut définir un timer pour animer l'image au fil du temps. Le code est le suivant :

var slider = document.getElementById("slider");
var ul = slider.children[0];
var liWidth = slider.offsetWidth / 3;
var currentIndex = 0;
var timer;

function autoPlay() {
  timer = setInterval(function() {
    currentIndex++;
    if (currentIndex >= 3) {
      currentIndex = 0;
    }
    ul.style.left = -currentIndex * liWidth + "px";
  }, 3000);
}
autoPlay();

Dans le code, nous récupérons d'abord le slider du conteneur contenant l'image et l'élément ul à l'intérieur du conteneur. Nous pouvons calculer la largeur de chaque image en divisant la largeur du conteneur par le nombre de li. Ensuite, définissez une variable currentIndex qui contient l'index de l'image actuelle afin de suivre l'état de rotation. Enfin, nous utilisons la fonction setInterval pour définir une minuterie qui s'exécute toutes les 3 secondes pour modifier la valeur currentIndex et la marge gauche de ul pour faire pivoter automatiquement l'image. Utilisez également la fonction clearInterval pour arrêter la minuterie lorsque vous devez arrêter la rotation.

3. Ajouter un indicateur d'image

Si vous souhaitez ajouter un indicateur à l'effet de rotation de l'image, vous pouvez ajouter un conteneur d'indicateur au code HTML et utiliser JavaScript pour créer dynamiquement l'indicateur. Le code est le suivant :

<div id="slider">
  <ul>
    <li><img src="path/to/image1.jpg"></li>
    <li><img src="path/to/image2.jpg"></li>
    <li><img src="path/to/image3.jpg"></li>
  </ul>
  <div id="indicator"></div>
</div>

var indicator = document.getElementById("indicator");

for (var i = 0; i < 3; i++) {
  var div = document.createElement("div");
  div.className = "dot";
  div.setAttribute("index", i);
  div.onclick = function() {
    currentIndex = parseInt(this.getAttribute("index"));
    ul.style.left = -currentIndex * liWidth + "px";
    setActive();
  };
  indicator.appendChild(div);
}

function setActive() {
  var dots = document.getElementsByClassName("dot");
  for (var i = 0; i < dots.length; i++) {
    if (currentIndex == i) {
      dots[i].className = "dot active";
    } else {
      dots[i].className = "dot";
    }
  }
}
setActive();

Nous obtenons d'abord l'indicateur de conteneur d'indicateur, puis utilisons des instructions de boucle pour créer dynamiquement plusieurs éléments div avec des attributs d'index pour représenter les points indicateurs de chaque image. Nous ajoutons ensuite un événement onclick pour chaque point indicateur lorsque vous cliquez sur le point indicateur, l'index de l'image actuelle currentIndex est modifié, la marge gauche de ul est définie sur la gauche et le point indicateur est défini sur l'état actif. Dans la fonction setActive, nous parcourons tous les points indicateurs, ajoutons le nom de la classe active au point indicateur actuellement sélectionné et approfondissons sa couleur d'arrière-plan pour le distinguer des points indicateurs non sélectionnés.

4. Résumé

Cet article explique comment utiliser HTML, CSS et JavaScript pour obtenir des effets de rotation d'image, tout en ajoutant des indicateurs pour améliorer l'expérience utilisateur. Si vous souhaitez apprendre en profondeur la programmation JavaScript, il est recommandé de pratiquer des animations Web, des conceptions d'interaction et des effets spéciaux plus similaires pour améliorer vos compétences et votre expérience pratique de développement de projets.

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!