Tutoriel sur l'utilisation de CSS pour implémenter l'effet carrousel automatique d'images réactives

Avec la popularité des appareils mobiles, la conception Web doit prendre en compte des facteurs tels que la résolution de l'appareil et la taille de l'écran des différents terminaux pour obtenir une bonne expérience utilisateur. Lors de la mise en œuvre d'un design réactif d'un site Web, il est souvent nécessaire d'utiliser l'effet carrousel d'images pour afficher le contenu de plusieurs images dans une fenêtre visuelle limitée, et en même temps, cela peut également améliorer l'effet visuel du site Web. Cet article expliquera comment utiliser CSS pour obtenir un effet de carrousel automatique d'image réactif, et fournira des exemples de code et une analyse.

Idées d'implémentation

Un carrousel d'images réactif peut être implémenté via une mise en page flexible CSS. Dans un conteneur fixe, configurez un conteneur flexible pour contenir chaque image dans un sous-conteneur flexible. Ensuite, en définissant la disposition des sous-conteneurs flexibles et la largeur des sous-éléments, la disposition en mosaïque des images est obtenue. Cependant, étant donné que la largeur du conteneur sera différente selon les tailles d'écran, vous devez utiliser des requêtes multimédias pour modifier dynamiquement la largeur du conteneur et des sous-éléments afin de vous adapter aux différentes résolutions d'écran. Ensuite, en définissant l'effet d'animation de CSS3, l'effet carrousel automatique est réalisé et l'effet de glissement est réalisé via js.

Étapes d'implémentation

1. Partie HTML

Tout d'abord, nous devons créer un conteneur contenant plusieurs images dans la partie HTML, comme indiqué ci-dessous :

<div class="carousel-container">
  <div class="carousel-items">
    <img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="">
    <img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="">
    <img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="">
    <img src="/static/imghw/default1.png"  data-src="image4.jpg"  class="lazy" alt="">
    <img src="/static/imghw/default1.png"  data-src="image5.jpg"  class="lazy" alt="">
  </div>
  <div class="carousel-prev"></div>
  <div class="carousel-next"></div>
</div>

Parmi eux, .carousel-container est le nom du style du conteneur, .carousel -items est le nom de style du sous-conteneur contenu dans l'image, .carousel-prev et .carousel-next sont les noms de style des flèches gauche et droite, nous définirons les styles dans la section CSS.

2. Partie CSS

Ensuite, nous devons définir les styles dans la partie CSS, y compris les styles des conteneurs, des sous-conteneurs et des flèches. Le code spécifique est le suivant :

.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.carousel-items {
  display: flex;
  flex-wrap: nowrap;
  width: 500%; /* 将子容器宽度扩大5倍 */
}

.carousel-items img {
  width: 20%;
  margin-right: 1rem;
  flex: 1;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

.carousel-prev {
  left: 0;
}

.carousel-next {
  right: 0;
}

Dans la définition du style, nous définissons le positionnement relatif du conteneur afin d'obtenir un positionnement absolu des sous-conteneurs et des flèches. En utilisant overflow:hidden, vous pouvez masquer les parties débordantes des sous-conteneurs dans le conteneur. Le sous-conteneur adopte une disposition flexible et l'attribut nowrap empêche les éléments du sous-conteneur de s'enrouler. Et définissez la largeur du sous-conteneur à 500 %. En définissant la largeur des images dans le sous-conteneur à 20 %, chaque ligne peut afficher 5 images et en définissant la marge droite entre les images sur 1rem pour rendre l'effet d'affichage plus beau. Les flèches gauche et droite sont centrées verticalement via un positionnement absolu et une marge supérieure négative.

3. Requête multimédia pour définir des attributs réactifs

Sous différentes tailles d'écran, la largeur du conteneur et des sous-éléments doit être modifiée dynamiquement pour s'adapter aux différentes résolutions d'écran. Nous pouvons définir des propriétés réactives via des requêtes multimédias et modifier la largeur du conteneur et des sous-conteneurs à différentes tailles d'écran, comme indiqué ci-dessous :

/* 根据不同屏幕尺寸改变样式 */
@media (max-width: 768px) {
  .carousel-items img {
    width: 50%;
  }
  .carousel-container {
    height: 250px;
  }
}

@media (max-width: 480px) {
  .carousel-items img {
    width: 100%;
    margin-right: 0;
  }
  .carousel-container {
    height: 180px;
  }
}

Dans l'exemple ci-dessus, nous définissons les éléments du carrousel img et carrousel en fonction de la taille de la fenêtre. changer le style du conteneur. Sur un petit écran, nous définissons chaque image à 50 % de largeur, ne définissons pas la marge droite entre les images et définissons la hauteur à 250 px dans le conteneur .crosso. Sur un écran plus petit, nous définissons l'image à 100 %. défini sur 180px dans le conteneur .crosso.

4. Animation CSS3

En utilisant l'animation CSS3, vous pouvez obtenir un effet carrousel d'image automatique. L'exemple de code est le suivant :

@keyframes carousel-animation {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(-100%);
  }
}

.carousel-items {
  /* 动画设置 */
  animation: carousel-animation 10s infinite linear;
}

.carousel-items:hover {
  /* 鼠标悬停时终止动画 */
  animation-play-state: paused;
}

Dans l'exemple ci-dessus, nous définissons le sous-conteneur d'image pour qu'il défile une fois toutes les 10 secondes, et l'animation. est complété par carrousel-animation , linéaire signifie que l'animation est linéaire et infini signifie que l'animation boucle à l'infini.

5. JavaScript pour obtenir un effet de glissement

Enfin, nous utilisons JavaScript pour obtenir l'effet de glissement d'image lorsque vous cliquez sur les flèches gauche et droite. L'exemple de code est le suivant :

// 获取左右箭头元素
var prev = document.querySelector(".carousel-prev");
var next = document.querySelector(".carousel-next");

// 图片滚动函数
function carouselScroll(direction) {
  var container = document.querySelector(".carousel-items");
  var minScrollLeft = 0;
  var maxScrollLeft = container.scrollWidth - container.clientWidth;
  var increment = 20 * direction;

  container.scrollLeft += increment;

  if (container.scrollLeft < minScrollLeft) {
    container.scrollLeft = maxScrollLeft;
  } else if (container.scrollLeft > maxScrollLeft) {
    container.scrollLeft = minScrollLeft;
  }
};

// 给左右箭头绑定事件
prev.addEventListener("click", function() {
  carouselScroll(-1);
});

next.addEventListener("click", function() {
  carouselScroll(1);
});

Dans l'exemple ci-dessus, nous obtenons les éléments. des flèches gauche et droite via querySelector et l'événement de clic de liaison. Utilisez la fonction carouselScroll pour obtenir l’effet de glissement d’image à chaque fois que vous cliquez. containers.scrollWidth représente la largeur effective du sous-conteneur et containers.clientWidth représente la largeur visible lors du défilement jusqu'au bord du conteneur, la position de défilement sera définie sur la position opposée pour obtenir l'effet de défilement circulaire.

Résumé

Dans cet article, nous avons utilisé les effets de mise en page et d'animation flexibles de CSS3, ainsi que JavaScript pour implémenter les événements de clic des flèches gauche et droite, et implémenté avec succès un effet de carrousel automatique d'image responsive. Nous avons également obtenu une conception réactive plus riche en ajoutant des requêtes multimédias et des effets de survol. Les exemples de code ont un certain degré de généralité et sont également utiles comme référence pour les débutants.

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!