Comment implémenter un composant coulissant d'image avec barre de défilement dans jquery

jQuery est une bibliothèque JavaScript largement utilisée qui simplifie les complexités de la programmation JavaScript. Les barres de défilement sont des éléments courants sur les sites Web. Vous pouvez facilement implémenter un composant coulissant d'image avec des barres de défilement en utilisant jQuery. Dans cet article, nous présenterons comment utiliser jQuery pour implémenter cette fonction.

Tout d'abord, nous devons présenter la bibliothèque jQuery. Vous pouvez télécharger la dernière version de la bibliothèque depuis le site officiel de jQuery ou utiliser un lien CDN (Content Delivery Network). Ici, nous utilisons un lien CDN pour charger la bibliothèque jQuery :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Ensuite, nous avons besoin de quelques styles pour définir le style de la barre de défilement. Ici, nous utilisons CSS pour définir le style de la barre de défilement. A noter que certains noms de classes qui seront mentionnés plus loin dans cet article sont utilisés ici. Si vous souhaitez modifier ces noms de classes, vous devez en même temps modifier le code correspondant.

.scroll-box {
  overflow: hidden; /* 隐藏滚动条 */
  position: relative;
}

.scroll-box .scroll-content {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

.scroll-box .scroll-bar {
  background-color: #ccc;
  border-radius: 10px;
  cursor: pointer;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  z-index: 1;
}

.scroll-box .scroll-bar .thumb {
  background-color: #999;
  border-radius: 5px;
  height: 50px;
  left: -10px;
  position: absolute;
  top: 0;
  width: 28px;
}

Ensuite, nous avons besoin de la structure HTML pour définir la zone de l'image, la zone de la barre de défilement et le curseur.

<div class="scroll-box">
  <div class="scroll-content">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
    <img src="image5.jpg" alt="Image 5">
    <img src="image6.jpg" alt="Image 6">
    <img src="image7.jpg" alt="Image 7">
    <img src="image8.jpg" alt="Image 8">
  </div>
  <div class="scroll-bar">
    <div class="thumb"></div>
  </div>
</div>

Dans le code ci-dessus, nous utilisons le nom de classe "scroll-box" pour définir le conteneur contenant l'image et la barre de défilement, le nom de classe "scroll-content" pour définir la zone d'image et la "scroll-bar" nom de classe Pour définir la zone de la barre de défilement, utilisez le nom de classe « pouce » pour définir le curseur.

Ensuite, nous avons besoin de code JavaScript pour implémenter le défilement de l'image. Avant de faire cela, nous devons définir une largeur pour chaque image afin de calculer la distance nécessaire pour défiler. Ici, nous définissons la largeur de l'image à 300 pixels :

.scroll-box .scroll-content img {
  display: inline-block;
  width: 300px;
}

Maintenant, nous pouvons commencer à écrire du code JavaScript. Tout d’abord, nous devons calculer la hauteur du curseur. La hauteur sera calculée en fonction du rapport entre la hauteur du conteneur d'image et la hauteur de la zone de contenu. Nous définissons la hauteur du curseur à 80 pixels (peut changer si nécessaire) :

var content_height = $('.scroll-content').height();
var container_height = $('.scroll-box').height();
var thumb_height = container_height / content_height * container_height;
$('.thumb').css('height', thumb_height);

Ensuite, nous devons lier l'événement glisser du curseur en réponse au défilement de l'utilisateur. Lorsque l'utilisateur fait glisser le curseur, nous déplaçons la zone de contenu de l'image vers le haut ou vers le bas et mettons à jour la position du curseur.

var is_drag = false;
var start_y = 0;
var start_top = 0;
$('.thumb').mousedown(function(e) {
  is_drag = true;
  start_y = e.pageY;
  start_top = parseInt($(this).css('top'));
});

$(document).mousemove(function(e) {
  if (is_drag) {
    var diff = e.pageY - start_y;
    var thumb_top = start_top + diff;
    var max_top = container_height - thumb_height;
    if (thumb_top < 0) {
      thumb_top = 0;
    }
    if (thumb_top > max_top) {
      thumb_top = max_top;
    }
    var scroll_top = thumb_top / max_top * (content_height - container_height);
    $('.scroll-content').css('top', -scroll_top);
    $('.thumb').css('top', thumb_top);
  }
});

$(document).mouseup(function() {
  is_drag = false;
});

Dans le code ci-dessus, nous lions les événements de la souris vers le bas, le mouvement de la souris et la souris vers le haut. Lorsque la souris est enfoncée, nous définissons la variable "is_drag" sur true, indiquant que l'utilisateur fait glisser le curseur, et enregistrons la position actuelle de la souris et la position du curseur. Lorsque la souris bouge, nous calculons la nouvelle position du curseur et la nouvelle position de la zone de contenu de l'image en fonction de la distance de mouvement de la souris, puis mettons à jour les positions du curseur et de la zone de contenu de l'image. Enfin, lorsque la souris est levée, nous définissons la variable "is_drag" sur false, indiquant que l'utilisateur a arrêté de glisser.

Maintenant, nous avons implémenté un composant de barre de défilement d'image jQuery. Ce composant permet aux utilisateurs de faire défiler facilement les images à l'aide d'un curseur, améliorant considérablement l'expérience utilisateur et la convivialité.

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!