Comment utiliser JavaScript pour obtenir l'effet de commutation de glisser gauche et droite des images ?-js tutoriel-php.cn

Comment utiliser JavaScript pour obtenir l'effet de commutation de glisser gauche et droite des images ?

王林

Libérer： 2023-10-21 09:27:28

original

1511 Les gens l'ont consulté

JavaScript 如何实现图片的左右拖动切换效果？

JavaScript Comment obtenir l'effet de commutation de glisser gauche et droite des images ?

Dans la conception Web moderne, les effets dynamiques peuvent augmenter l'expérience utilisateur et l'attrait visuel. L'effet de commutation des images par glisser-déplacer vers la gauche et la droite est un effet dynamique courant, qui permet aux utilisateurs de changer de contenu en faisant glisser des images. Dans cet article, nous présenterons comment utiliser JavaScript pour obtenir cet effet de changement d'image et fournirons des exemples de code spécifiques.

Tout d'abord, nous devons préparer du code HTML et CSS pour créer un conteneur avec plusieurs images et le styliser afin qu'il puisse être déplacé horizontalement. Voici un exemple de code simple :

<!DOCTYPE html>
<html>
<head>
  <style>
    .image-container {
      width: 800px;
      overflow: hidden;
      white-space: nowrap;
    }
    .image-container img {
      display: inline-block;
      width: 600px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>

  <script src="script.js"></script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous avons créé un élément div nommé image-container comme conteneur d'image et défini le style correspondant. À l’intérieur de l’élément div, nous avons placé trois éléments img, représentant respectivement trois images.

Ensuite, nous devons écrire du code dans le fichier JavaScript pour permettre à l'image de changer en fonction du glissement de l'utilisateur. Voici un exemple de code :

// 获取图片容器元素
var container = document.querySelector('.image-container');

// 初始化变量
var startX = 0; // 初始鼠标位置
var scrollLeft = 0; // 初始滚动位置

// 鼠标按下事件
container.addEventListener('mousedown', function(e) {
  startX = e.pageX - container.offsetLeft; // 计算鼠标初始位置相对于图片容器的偏移量
  scrollLeft = container.scrollLeft; // 获取当前滚动位置
  container.classList.add('active'); // 添加active类，用于改变样式
});

// 鼠标移动事件
container.addEventListener('mousemove', function(e) {
  if (!container.classList.contains('active')) return; // 如果没有被激活，直接返回
  e.preventDefault(); // 阻止默认滚动行为
  var x = e.pageX - container.offsetLeft; // 计算当前鼠标位置相对于图片容器的偏移量
  var walk = (x - startX) * 2; // 计算鼠标移动的距离，并乘以一个因子，以便图片移动更快
  container.scrollLeft = scrollLeft - walk; // 根据鼠标移动距离来改变滚动位置
});

// 鼠标释放事件
container.addEventListener('mouseup', function() {
  container.classList.remove('active'); // 移除active类
});

Copier après la connexion

Dans le code ci-dessus, nous obtenons d'abord l'élément conteneur d'image via la méthode document.querySelector et initialisons plusieurs variables pour enregistrer certaines valeurs initiales. Ensuite, nous avons ajouté des écouteurs d'événements pour les événements mousedown, mousemove et mouseup du conteneur d'images.

Dans le gestionnaire d'événements mousedown, nous obtenons le décalage de la position initiale de la souris et enregistrons la position de défilement actuelle. En même temps, nous avons ajouté une classe nommée active au conteneur d'images pour changer le style du conteneur.

Dans le gestionnaire d'événements mousemove, nous déterminons d'abord si le conteneur d'images est activé. S'il n'est pas actif, revenez directement. Ensuite, nous empêchons le comportement de défilement par défaut et calculons le décalage de la position actuelle de la souris par rapport au conteneur d'images. Ensuite, la position de défilement est modifiée en fonction de la distance de mouvement de la souris pour obtenir l'effet de commutation de glisser gauche et droite de l'image.

Enfin, dans le gestionnaire d'événements mouseup, nous supprimons la classe active du conteneur pour restaurer le style.

Avec le code ci-dessus, nous pouvons obtenir l'effet de commutation de glisser gauche et droite de l'image. Les utilisateurs peuvent changer et parcourir les images en faisant glisser la souris.

Ce qui précède montre comment JavaScript implémente l'effet de commutation de glisser gauche et droite des images. En écrivant correctement du code JavaScript et en combinant HTML et CSS, nous pouvons obtenir divers effets dynamiques et ajouter plus d'interaction et d'attrait à la page Web. J'espère que cet article vous aidera !

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!