Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama

JavaScript est un langage de script qui peut être utilisé pour ajouter des effets interactifs aux pages Web. Parmi eux, les effets de carrousel d'images et de diaporama sont des effets d'animation de pages Web courants. Cet article explique comment utiliser les fonctions JavaScript pour obtenir ces deux effets et fournit des exemples de code spécifiques.

1. Carrousel d'images

Le carrousel d'images est un effet qui fait pivoter plusieurs images d'une certaine manière. Lors de la mise en œuvre de carrousels d'images, des minuteries JavaScript et des contrôles de style CSS doivent être utilisés.

(1) Préparation

Tout d'abord, dans le fichier HTML, vous devez définir un conteneur div pour afficher l'image du carrousel. Nous pouvons définir un autre élément ul pour stocker toutes les images qui doivent être pivotées. Chaque élément li contient une image.

<div id="slider">
  <ul>
    <li><img  src="/static/imghw/default1.png"  data-src="img1.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" ></li>
    <li><img  src="/static/imghw/default1.png"  data-src="img2.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" ></li>
    <li><img  src="/static/imghw/default1.png"  data-src="img3.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" ></li>
    <li><img  src="/static/imghw/default1.png"  data-src="img4.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" ></li>
  </ul>
</div>

Dans le fichier CSS, un certain style doit être apporté à ces éléments. Par exemple, définissez la largeur et la hauteur du conteneur div sur la taille réelle de l'image et définissez l'attribut de débordement sur caché, afin que la partie située au-delà du conteneur puisse être masquée. Dans le même temps, définissez la largeur de l'élément ul sur la somme des largeurs de toutes les images et définissez la hauteur sur la hauteur réelle de l'image.

#slider {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

#slider ul {
  width: 2400px; /* 4张图片的宽度之和 */
  height: 400px;
  position: absolute;
  left: 0;
}

(2) Implémentation du carrousel

Ensuite, nous devons utiliser des fonctions JavaScript pour obtenir l'effet carrousel. Le processus spécifique de mise en œuvre est le suivant :

① Définir un index variable pour enregistrer le numéro de série de l'image actuellement affichée.

var index = 0;

② Écrivez une fonction carrousel pour changer d'image à certains intervalles et mettre à jour la valeur de la variable d'index. Dans cette fonction, la valeur gauche de l'élément ul doit être définie sur l'inverse (nombre négatif) de la largeur de l'image actuelle, afin que l'effet carrousel puisse être obtenu.

function slide() {
  index++;
  if (index >= 4) {  // 图片总数为4，如果index超过4，就将其重置为0
    index = 0;
  }
  var leftVal = -index * 600 + "px";  // 每次切换，将ul元素的left值设置为当前图片的宽度的相反数
  $("#slider ul").stop().animate({left: leftVal}, 500);  // 使用jQuery的animate方法实现滑动效果
}

Dans le code ci-dessus, nous avons utilisé la méthode animate() dans la bibliothèque jQuery, qui peut être utilisée pour obtenir des effets d'animation. La méthode animate() accepte deux paramètres. Le premier paramètre est un objet utilisé pour définir les propriétés CSS et les valeurs de l'animation. Ici, nous définissons l'attribut gauche de l'élément ul ; spécifiez la durée d'exécution de l'animation, en millisecondes.

③ Appelez la fonction carrousel et utilisez la méthode setInterval() pour l'exécuter régulièrement.

setInterval(slide, 2000);

Dans le code ci-dessus, nous utilisons la méthode setInterval(), qui peut être utilisée pour exécuter régulièrement le code spécifié. Le premier paramètre est le nom de la fonction à exécuter régulièrement et le deuxième paramètre est l'intervalle de temps en millisecondes.

Enfin, le code d'implémentation de l'ensemble du carrousel d'images est le suivant :

<!DOCTYPE html>
<html>
<head>
  <title>图片轮播</title>
  <meta charset="utf-8">
  <style>
    #slider {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative;
    }

    #slider ul {
      width: 2400px;
      height: 400px;
      position: absolute;
      left: 0;
    }

    #slider ul li {
      float: left;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function () {
      var index = 0;

      function slide() {
        index++;
        if (index >= 4) {
          index = 0;
        }
        var leftVal = -index * 600 + "px";
        $("#slider ul").stop().animate({left: leftVal}, 500);
      }

      setInterval(slide, 2000);
    })
  </script>
</head>
<body>
  <div id="slider">
    <ul>
      <li><img  src="/static/imghw/default1.png"  data-src="img1.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" ></li>
      <li><img  src="/static/imghw/default1.png"  data-src="img2.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" ></li>
      <li><img  src="/static/imghw/default1.png"  data-src="img3.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" ></li>
      <li><img  src="/static/imghw/default1.png"  data-src="img4.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" ></li>
    </ul>
  </div>
</body>
</html>

2. Effet diaporama

L'effet diaporama est un effet qui commute plusieurs images dans un certain ordre. Lors de l'implémentation de l'effet de diapositive, l'écoute des événements JavaScript et le contrôle du style CSS sont requis.

(1) Préparation

De même, dans le fichier HTML, vous devez définir un conteneur div pour afficher les diapositives. Nous pouvons définir plusieurs éléments img, chaque élément img contient une image.

<div id="slideshow">
  <img  src="/static/imghw/default1.png"  data-src="img1.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" >
  <img  src="/static/imghw/default1.png"  data-src="img2.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" >
  <img  src="/static/imghw/default1.png"  data-src="img3.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" >
  <img  src="/static/imghw/default1.png"  data-src="img4.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" >
</div>

Dans le fichier CSS, nous devons styliser ces éléments. Par exemple, définissez la largeur et la hauteur du conteneur div sur la taille réelle de l'image, et définissez l'attribut overflow sur caché ; définissez la position de tous les éléments img sur absolue afin qu'ils puissent se chevaucher et s'afficher et définir tout sauf le ; première image La transparence de l'image est définie sur 0.

#slideshow {
  width: 600px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

#slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#slideshow img:first-child {
  opacity: 1;
}

Dans le code ci-dessus, nous avons utilisé la pseudo-classe :first-child pour définir la transparence de la première image sur 1.

(2) Implémentation du diaporama

Ensuite, nous devons utiliser les fonctions JavaScript pour obtenir l'effet de diaporama. Le processus spécifique est le suivant :

① Définir un index variable pour enregistrer le numéro de série de l'image actuellement affichée.

var index = 1;

② Écrivez une fonction pour changer d'image et mettre à jour la valeur de la variable d'index. Dans cette fonction, nous définissons d'abord la transparence de l'image actuellement affichée sur 0, puis ajoutons 1 à la valeur de la variable d'index et déterminons si le nombre total d'images est dépassé. En cas de dépassement, remettez-le à 1. Définissez ensuite la transparence de l’image suivante sur 1 et animez-la.

function show() {
  $("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 0}, 1000); // 当前图片透明度减少
  index++;
  if (index > 4) {
    index = 1;
  }
  $("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 1}, 1000); // 下一张图片透明度增加
}

Dans le code ci-dessus, nous utilisons le sélecteur :nth-child, qui peut sélectionner un élément enfant sous l'élément parent spécifié. Dans cet exemple, nous utilisons ce sélecteur pour sélectionner l'image d'index.

③ Utilisez la méthode setInterval() pour exécuter régulièrement la fonction show.

$(function () {
  setInterval(show, 3000);
})

Dans le code ci-dessus, nous utilisons la méthode $() et la méthode setInterval() de la bibliothèque jQuery pour implémenter les appels planifiés. La méthode $() est utilisée pour obtenir l'élément spécifié et la méthode setInterval() peut appeler périodiquement la fonction spécifiée.

Enfin, le code pour implémenter l'intégralité de l'effet de diaporama est le suivant :

<!DOCTYPE html>
<html>
<head>
  <title>幻灯片效果</title>
  <meta charset="utf-8">
  <style>
    #slideshow {
      width: 600px;
      height: 400px;
      overflow: hidden;
      position: relative;
    }

    #slideshow img {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }

    #slideshow img:first-child {
      opacity: 1;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function () {
      var index = 1;

      function show() {
        $("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 0}, 1000);
        index++;
        if (index > 4) {
          index = 1;
        }
        $("#slideshow img:nth-child(" + index + ")").stop().animate({opacity: 1}, 1000);
      }

      setInterval(show, 3000);
    })
  </script>
</head>
<body>
  <div id="slideshow">
    <img  src="/static/imghw/default1.png"  data-src="img1.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" >
    <img  src="/static/imghw/default1.png"  data-src="img2.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" >
    <img  src="/static/imghw/default1.png"  data-src="img3.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" >
    <img  src="/static/imghw/default1.png"  data-src="img4.jpg"  class="lazy" alt="Utilisez les fonctions JavaScript pour implémenter des carrousels d'images et des effets de diaporama" >
  </div>
</body>
</html>

Grâce aux exemples de code ci-dessus, nous avons implémenté l'utilisation de fonctions JavaScript pour obtenir des effets de carrousel d'images et de diaporama, et avons introduit le processus d'implémentation spécifique. Ces technologies sont très utiles pour améliorer l'interaction des pages Web et les effets d'animation. Les lecteurs peuvent modifier et optimiser en fonction des besoins réels et améliorer continuellement leurs capacités de développement.

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!