Wie kann man in JavaScript einen nahtlosen Wechseleffekt von Bildern nach links und rechts erzielen und sie gleichzeitig auf den Container beschränken?

JavaScript Wie erreicht man den nahtlosen Wechseleffekt von Bildern nach links und rechts und beschränkt sie gleichzeitig auf den Container?

Bei der Webentwicklung stoßen wir häufig auf Situationen, in denen wir Bildkarusselleffekte implementieren müssen. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript den nahtlosen Wechseleffekt von Bildern nach links und rechts erzielen und sie auf bestimmte Container beschränken.

Zuerst müssen wir einen Container in HTML erstellen, um Bilder anzuzeigen. Dieser Container kann ein div-Element sein. Wir geben ihm eine feste Breite und Höhe und setzen den Überlauf auf versteckt, um den Anzeigebereich einzuschränken. Der Code lautet wie folgt:

<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>

Als nächstes müssen wir JavaScript verwenden, um den Effekt eines nahtlosen Gleitwechsels zu erzielen. Die spezifischen Schritte lauten wie folgt:

1. Erhalten Sie Verweise auf verwandte Elemente:

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

2. Legen Sie den anfänglichen Stil fest:

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

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

3. Erzielen Sie einen nahtlosen Gleitschalteffekt:

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);
  });
});

Durch den obigen Code erreichen wir die Nahtlosigkeit des Bildes Gleitender Schalteffekt und auf den angegebenen Container beschränkt. Wenn das Bild im Container berührt und verschoben wird, wechselt es entsprechend der Schieberichtung zum entsprechenden Bild. Beim Umschalten zum letzten Bild wird beim erneuten Umschalten zum ersten Bild gesprungen und umgekehrt.

Ich hoffe, dass dieser Artikel hilfreich ist, um zu verstehen, wie man mit JavaScript den nahtlosen Wechseleffekt von Bildern nach links und rechts erzielt.

Das obige ist der detaillierte Inhalt vonWie kann man in JavaScript einen nahtlosen Wechseleffekt von Bildern nach links und rechts erzielen und sie gleichzeitig auf den Container beschränken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!