HTML, CSS et jQuery : un guide technique pour implémenter l'affichage défilant des images

HTML, CSS et jQuery : Guide technique pour la mise en œuvre de l'affichage par défilement d'images

Introduction :
Dans la conception Web moderne, l'affichage par défilement d'images est une méthode d'interaction courante qui peut attirer l'attention des utilisateurs et offrir une meilleure expérience utilisateur. Cet article expliquera comment utiliser HTML, CSS et jQuery pour réaliser un affichage défilant d'images et fournira des exemples de code spécifiques.

1. Structure HTML :
Avant de commencer, nous devons déterminer la structure HTML de l'affichage défilant des images. Habituellement, nous utilisons une liste pour contenir toutes les images. Chaque image est placée dans un élément de liste. Ce qui suit est un exemple simple de structure HTML :

<div class="slider">
  <ul class="slider-wrapper">
    <li class="slide">
      <img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1">
    </li>
    <li class="slide">
      <img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2">
    </li>
    <li class="slide">
      <img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3">
    </li>
  </ul>
</div>

2. Styles CSS :
Ensuite, nous devons ajouter quelques styles CSS de base pour l'affichage défilant des images. Ces styles affecteront la mise en page et la présentation de l'image. Ce qui suit est un exemple de style CSS de base :

.slider {
  width: 500px; /* 设置图片展示区域的宽度 */
  height: 300px; /* 设置图片展示区域的高度 */
  overflow: hidden; /* 隐藏超出尺寸的图片 */
  position: relative; /* 设置相对定位 */
}

.slider-wrapper {
  width: 100%; /* 设置图片列表的宽度 */
  height: 100%; /* 设置图片列表的高度 */
  display: flex; /* 使用flex布局 */
  transition: transform 0.5s ease; /* 设置滚动效果的过渡动画 */
}

.slide {
  width: 100%; /* 设置每个列表项的宽度 */
  height: 100%; /* 设置每个列表项的高度 */
  flex-shrink: 0; /* 防止图片缩小 */
}

.slide img {
  width: 100%; /* 设置图片的宽度 */
  height: 100%; /* 设置图片的高度 */
}

3. jQuery pour implémenter le défilement :
En utilisant la fonction animate() de jQuery, nous pouvons obtenir un effet de défilement fluide de la liste d'images. Ce qui suit est un exemple simple de code jQuery : animate()函数，我们可以实现图片列表的平滑滚动效果。以下是一个简单的jQuery代码示例：

$(document).ready(function() {
  var sliderWrapper = $('.slider-wrapper');
  var slides = $('.slide');
  var slideWidth = slides.first().outerWidth(); // 获取每个图片列表项的宽度

  // 设置图片列表的总宽度
  sliderWrapper.css('width', slideWidth * slides.length);

  function slide() {
    // 获取当前图片列表的左偏移量
    var currentLeft = sliderWrapper.position().left;

    // 判断是否到达最后一张图片，如果是则滚动到第一张图片
    if (currentLeft <= -(slideWidth * (slides.length - 1))) {
      sliderWrapper.css('left', 0);
    } else {
      // 执行滚动动画
      sliderWrapper.animate({ 'left': currentLeft - slideWidth }, 500);
    }

    // 设置定时器，自动滚动图片
    setTimeout(slide, 3000);
  }

  // 启动自动滚动
  setTimeout(slide, 3000);
});

以上代码中，我们使用定时器来实现自动滚动效果，并通过animate()rrreee

Dans le code ci-dessus, nous utilisons une minuterie pour obtenir l'effet de défilement automatique et utilisons la fonction animate() pour implémenter l'animation de défilement de l'image. liste. Toutes les 3 secondes, la liste d'images défilera vers la gauche de la largeur d'une image jusqu'à atteindre la dernière image, puis reviendra à la première image.

Conclusion : 

Grâce à la combinaison de HTML, CSS et jQuery, nous pouvons obtenir un effet d'affichage de défilement d'image simple et dynamique. J'espère que les conseils techniques et les exemples de code fournis dans cet article vous seront utiles pour implémenter cet effet interactif dans votre conception Web. Amusez-vous à afficher de belles images sur vos pages web ! 🎜

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!