Comment obtenir un effet de commutation coulissant fluide vers la gauche et la droite des images en JavaScript tout en les limitant au conteneur ?

JavaScript Comment obtenir un effet de commutation coulissant fluide vers la gauche et la droite des images tout en les limitant au conteneur ?

Dans le développement Web, nous rencontrons souvent des situations où nous devons implémenter des effets de carrousel d'images. Cet article explique comment utiliser JavaScript pour obtenir un effet de commutation fluide des images vers la gauche et la droite et les limiter à des conteneurs spécifiés.

Tout d'abord, nous devons créer un conteneur en HTML pour afficher les images. Ce conteneur peut être un élément div. Nous lui donnons une largeur et une hauteur fixes, et définissons le débordement sur caché pour limiter la plage d'affichage. Le code est le suivant :

<div id="container">
  <ul id="imageList">
    <li><img src="image1.jpg"/></li>
    <li><img src="image2.jpg"/></li>
    <li><img src="image3.jpg"/></li>
    ...
  </ul>
</div>

Ensuite, nous devons utiliser JavaScript pour obtenir l'effet d'une commutation coulissante transparente. Les étapes spécifiques sont les suivantes :

1. Obtenir des références aux éléments associés :

var container = document.getElementById('container');
var imageList = document.getElementById('imageList');
var images = imageList.getElementsByTagName('img');
var currentIndex = 0; // 当前显示的图片索引

2. Définir le style initial :

// 设置imageList的宽度，保证所有图片水平排列
imageList.style.width = images.length * 100 + '%';

// 设置每张图片的宽度
for (var i = 0; i < images.length; i++) {
  images[i].style.width = 100 / images.length + '%';
}

3. Obtenir un effet de commutation coulissant transparent :

function slideTo(index) {
  // 计算需要滑动的距离
  var distance = -index * container.offsetWidth;

  // 设置imageList的动画效果
  imageList.style.transition = 'transform 0.5s ease';
  imageList.style.transform = 'translate(' + distance + 'px, 0)';
}

function reset() {
  // 当滑动到最后一张图时，切换到第一张图
  if (currentIndex === images.length) {
    currentIndex = 0;
  }

  // 当滑动到第一张图之前时，切换到最后一张图
  if (currentIndex < 0) {
    currentIndex = images.length - 1;
  }

  // 移除过渡效果，快速切换到目标位置
  imageList.style.transition = 'none';
  imageList.style.transform = 'translate(' + (-currentIndex * container.offsetWidth) + 'px, 0)';
}

function slideNext() {
  currentIndex++;
  slideTo(currentIndex);
}

function slidePrev() {
  currentIndex--;
  slideTo(currentIndex);
}

// 监听容器的滑动事件
container.addEventListener('touchstart', function (event) {
  var startTouchPos = event.touches[0].clientX;
  var lastTouchPos = startTouchPos;

  // 监听容器的滑动过程
  container.addEventListener('touchmove', function (event) {
    var currentTouchPos = event.touches[0].clientX;
    var diff = currentTouchPos - lastTouchPos;

    // 判断滑动方向
    if (diff > 0) {
      slideNext();
    } else {
      slidePrev();
    }

    lastTouchPos = currentTouchPos;
  });

  // 监听容器的滑动结束事件
  container.addEventListener('touchend', function (event) {
    reset();
    container.removeEventListener('touchmove', onTouchMove);
    container.removeEventListener('touchend', onTouchEnd);
  });
});

Grâce au code ci-dessus, nous obtenons la transparence de l'image Effet de commutation coulissant et limité au conteneur spécifié. Lorsque l'image dans le conteneur est touchée et glissée, elle passe à l'image correspondante selon la direction de glissement. Lorsque vous passez à la dernière image, si vous passez à nouveau, vous passerez à la première image et vice versa.

J'espère que cet article vous sera utile pour comprendre comment utiliser JavaScript pour obtenir l'effet de commutation fluide des images vers la gauche et la droite.

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!