recherche

Maison >interface Web >Questions et réponses frontales >Implémenter le changement d'image à l'aide de javascript

Implémenter le changement d'image à l'aide de javascript

WBOY
WBOYoriginal
2023-05-27 10:55:382192parcourir

Avec le développement des applications Internet, la beauté et l'interactivité des sites Web sont devenues des facteurs importants pour attirer les visiteurs. En web design, l’utilisation d’images est indispensable. Mettre en place un effet de transition d'image sur votre page est un excellent moyen d'attirer l'attention de l'utilisateur. Dans cet article, nous utiliserons JavaScript pour implémenter un simple effet de changement d'image.

Tout d'abord, nous devons créer un fichier HTML. En tête du fichier, nous pouvons ajouter des références aux styles CSS et aux scripts JavaScript. Dans la balise body, créez un élément div pour envelopper notre image. Comme indiqué ci-dessous : 

<!DOCTYPE HTML>
<html>
<head>
  <title>图片切换</title>
  <style type="text/css">
    #img {
      width: 600px;
      height: 400px;
      margin: 0 auto;
      position: relative;
    }
    #img img {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }
    #img img.active {
      opacity: 1;
    }
  </style>
  <script src="img_switch.js"></script>
</head>
<body>
  <div id="img">
    <img src="image1.jpg" class="active" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
    <img src="image4.jpg" />
  </div>
</body>
</html>

Dans le style CSS, nous définissons la largeur et la hauteur de l'élément div #img et définissons la position de l'image comme relative. Définissez également la position de chaque image sur absolue afin qu'elles puissent être empilées ensemble.

Ici, nous utilisons l'attribut opacité pour définir la transparence de l'image. La classe active représente l'image actuellement affichée. Lors du passage à l'image suivante, nous définissons la valeur d'opacité de l'image actuellement affichée sur 0, puis définissons la valeur d'opacité de l'image suivante sur 1. Cela crée un effet de décoloration et d’émergence.

Ensuite, nous allons créer un fichier de script JavaScript img_switch.js. Le code est le suivant : 

var i = 0; // 初始化计数器
var images = document.querySelectorAll("#img img"); // 获取所有的图片元素
var len = images.length; // 获取图片的总数

function switchImg() {
  // 隐藏当前展示的图片
  images[i].classList.remove("active");
  // 获取下一个图片的索引位置
  i = (i + 1) % len;
  // 显示下一张图片
  images[i].classList.add("active");
}

// 每隔5秒切换一次图片
setInterval(switchImg, 5000);

Dans ce script JavaScript, nous définissons d'abord une variable compteur i, puis obtenons tous les éléments de l'image et les stockons dans la variable images. Nous définissons également la variable len pour stocker le nombre total d'images.

Dans la fonction switchImg, nous supprimons d'abord la classe active de l'image actuellement affichée, puis calculons la position d'index de l'image suivante et ajoutons la classe active pour afficher l'image suivante. Nous utilisons la fonction setInterval pour appeler régulièrement la fonction switchImg afin de réaliser la fonction de changement automatique d'image.

Enfin, nous référençons le script JavaScript dans le fichier HTML pour déclencher l'effet de commutation automatique.

Voici comment utiliser JavaScript pour changer d'image. Nous pouvons personnaliser les styles et les scripts selon vos besoins pour obtenir des effets plus cool.

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：installation des outils de développement html5Article suivant：installation des outils de développement html5

Articles Liés

Voir plus