Comment utiliser CSS pour obtenir un effet de changement d'image simple

CSS est l'une des technologies les plus importantes dans le développement front-end et peut réaliser différents styles et animations. Parmi eux, le changement d'image est également une exigence courante, comme les carrousels de sites Web, les diapositives, etc. Dans cet article, je vais vous présenter comment utiliser CSS pour obtenir un effet de changement d'image simple.

1. Structure HTML

Tout d'abord, nous devons ajouter des images à la page Web et leur attribuer différents identifiants ou classes. Voici un exemple de code :

<div class="slider">
  <img id="img1" src="image1.jpg" alt="Image 1">
  <img id="img2" src="image2.jpg" alt="Image 2">
  <img id="img3" src="image3.jpg" alt="Image 3">
</div>

Comme vous pouvez le voir, nous utilisons class="slider" dans la balise <div>, pour faciliter l'utilisation de conteneur de sélection CSS pour opérer sur les éléments qu'il contient. Les attributs ID et src dans la balise <img> spécifient respectivement l'identifiant unique et le chemin source de l'image. <div>标签中使用了class="slider"，这是为了方便使用CSS选择器来操作它里面的元素。<img>标签中的ID和src属性分别指定了图片的唯一标识和来源路径。

二、CSS样式

接下来，我们需要为每个图片设置CSS样式，并利用CSS选择器来切换它们。以下是一个示例代码：

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

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slider img:first-child {
  opacity: 1;
}

.slider img.active {
  opacity: 1;
}

首先，我们为class="slider"的<div>标签设置了一些基本样式，包括高度、宽度和隐藏溢出内容。接下来，我们为每个图片设置样式：绝对定位、透明度为0、过渡效果等。其中，.slider img:first-child选择器表示第一个图片为活动状态，即显示在网页上。

三、JS交互

最后，我们需要为网页添加JavaScript交互，实现图片的切换。以下是一个示例代码：

var currentImg = 1;
var totalImg = $(".slider img").length;

function changeImg() {
  setInterval(function() {
    currentImg++;
    if (currentImg > totalImg) {
      currentImg = 1;
    }
    $(".slider img").removeClass("active");
    $("#img"+currentImg).addClass("active");
  }, 5000);
}

$(document).ready(function() {
  changeImg();
});

这段代码的作用是定义一个变量currentImg表示当前图片，以及一个变量totalImg表示图片总数。然后，使用setInterval函数来间隔一定时间（本例中为5秒）调用changeImg函数。在该函数中，首先更新当前图片并判断是否超过总数，然后使用CSS选择器移除所有图片的active类名并为当前图片添加该类名。最后，在网页加载时调用changeImg

2. Styles CSS

Ensuite, nous devons définir des styles CSS pour chaque image et utiliser des sélecteurs CSS pour les changer. Voici un exemple de code :

<div class="slider">
  <img id="img1" src="https://source.unsplash.com/random/600x400" alt="Image 1">
  <img id="img2" src="https://source.unsplash.com/random/600x401" alt="Image 2">
  <img id="img3" src="https://source.unsplash.com/random/600x402" alt="Image 3">
</div>

Tout d'abord, nous définissons quelques styles de base pour la balise <div> du class="slider", notamment la hauteur, la largeur et contenu de débordement caché. Ensuite, nous définissons des styles pour chaque image : positionnement absolu, transparence de 0, effets de transition, etc. Parmi eux, le sélecteur .slider img:first-child indique que la première image est active, c'est-à-dire affichée sur la page web.

3. Interaction JS

Enfin, nous devons ajouter une interaction JavaScript à la page Web pour réaliser le changement d'image. Voici un exemple de code :

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

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slider img:first-child {
  opacity: 1;
}

.slider img.active {
  opacity: 1;
}

Le but de ce code est de définir une variable currentImg pour représenter l'image actuelle, et une variable totalImg pour représenter le nombre total de photos. Ensuite, utilisez la fonction setInterval pour appeler la fonction changeImg à un certain intervalle (5 secondes dans ce cas). Dans cette fonction, mettez d'abord à jour l'image actuelle et déterminez si le nombre total est dépassé, puis utilisez le sélecteur CSS pour supprimer le nom de classe active de toutes les images et ajoutez le nom de classe à l'image actuelle. Enfin, appelez la fonction changeImg lors du chargement de la page Web pour démarrer le changement d'image.

4. Affichage de l'effet

Après les trois étapes ci-dessus, nous pouvons obtenir un simple effet de changement d'image. Un effet de démonstration est fourni ici à titre de référence. 🎜🎜Code HTML : 🎜

var currentImg = 1;
var totalImg = $(".slider img").length;

function changeImg() {
  setInterval(function() {
    currentImg++;
    if (currentImg > totalImg) {
      currentImg = 1;
    }
    $(".slider img").removeClass("active");
    $("#img"+currentImg).addClass("active");
  }, 5000);
}

$(document).ready(function() {
  changeImg();
});

🎜Code CSS : 🎜rrreee🎜Code JS : 🎜rrreee🎜Affichage des effets : https://codepen.io/fangzhou/pen/oQJNEN🎜🎜Pour résumer, il n'est pas difficile d'utiliser CSS pour pour obtenir un effet de changement d'image, il suffit de maîtriser certaines connaissances et compétences de base. Bien entendu, le développement réel peut impliquer des situations plus complexes, qui nécessitent un apprentissage et une pratique continus. 🎜

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!