Wie kann in JavaScript ein nahtloser Links-Rechts-Schiebeeffekt von Bildern erzielt werden?

JavaScript Wie erreicht man den nahtlosen Wechseleffekt von Bildern nach links und rechts?

Mit der Entwicklung des Internets werden Bilder oft als wichtige Elemente der Seite im Webdesign verwendet. Der Wechseleffekt von Bildern hat einen wichtigen Einfluss auf die Schönheit und Interaktivität der Seite. In diesem Artikel werden wir anhand konkreter Codebeispiele untersuchen, wie Sie mithilfe von JavaScript einen nahtlosen Links-Rechts-Schiebeeffekt von Bildern erzielen können.

Um den nahtlosen Effekt des Schiebewechsels von Bildern nach links und rechts zu erzielen, müssen Sie zunächst Folgendes tun:

1. Erstellen Sie einen Bildcontainer, um mehrere Bilder zu platzieren und den Effekt des Schiebewechsels zu erzielen.
2. Stellen Sie Stile so ein, dass der Bildcontainer horizontal angeordnet werden kann, und blenden Sie den Teil aus, der über die Breite des Containers hinausgeht.
3. Verwenden Sie JavaScript, um die Position des Containers zu steuern und Bildwechseleffekte zu erzielen.

Das Folgende ist ein spezifisches Codebeispiel:

HTML-Code:

<div class="slider-container">
  <ul class="slider-list">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
    <!-- 可以添加更多的图片 -->
  </ul>
</div>
````

CSS 代码：

.slider-container {
width: 800px; / Legen Sie die Containerbreite fest/
overflow: versteckt; / Verstecken Sie den Teil, der das überschreitet Containerbreite/
}

.slider-list {
width: 300 %; / Stellen Sie die Containerbreite auf das Dreifache der Gesamtbreite des Bildes ein/
display: flex; / Legen Sie fest, dass das Bild horizontal angeordnet werden soll /
Übergang: 0,5 s transformieren; / Übergangseffekt hinzufügen/
}

.slider-list li {
flex: 1 0 100%; / Stellen Sie die Breite jedes Bildes auf 1/3 der Containerbreite ein /
}

JavaScript 代码：

function slideNext() {
let sliderList = document.querySelector('.slider-list');
let currTranslate = window.getComputedStyle(sliderList).getPropertyValue('transform'); // Holen Sie sich die Verschiebungswert des aktuellen Containers, um festzustellen, ob er das Ende eines Bildes erreicht hat

if (currTranslate === 'none') currTranslate = 0; // Der erhaltene anfängliche Verschiebungswert ist 'none', konvertiere ihn in 0
else currTranslate = parseInt(currTranslate.split(',') [4].trim());

if (currTranslate <= -(sliderList.offsetWidth - document.querySelector('.slider-container').offsetWidth)) {

sliderList.style.transform = `translateX(0px)`; // 如果已经到达最后一张图片，则将容器位移值重置为 0，实现无缝切换

} else {

sliderList.style.transform = `translateX(${currTranslate - document.querySelector('.slider-container').offsetWidth}px)`; // 每次滑动一个图片宽度的距离

}
}

function slidePrev() {
let sliderList = document.querySelector('.slider-list');
let currTranslate = window.getComputedStyle(sliderList).getPropertyValue(' transform'); // Den Verschiebungswert des aktuellen Containers abrufen, um zu bestimmen, ob das erste Bild erreicht wurde

if (currTranslate === 'none') currTranslate = 0; none', konvertieren Sie es in 0
else currTranslate = parseInt(currTranslate .split(',')[4].trim());

if (currTranslate >= 0) {

sliderList.style.transform = `translateX(-${sliderList.offsetWidth - document.querySelector('.slider-container').offsetWidth}px)`; // 如果已经到达第一张图片，则将容器位移值设置为最后一张图片的位置，实现无缝切换

} else {

sliderList.style.transform = `translateX(${currTranslate + document.querySelector('.slider-container').offsetWidth}px)`; // 每次滑动一个图片宽度的距离

}
}

setInterval(slideNext, 3000); // Rufen Sie die Funktion slideNext regelmäßig auf, um eine automatische Umschaltung zu erreichen

以上代码示例中，我们使用了一个图片容器 `.slider-container` ，其中包含了一个图片列表 `.slider-list` ，通过调整列表的位置实现图片的滑动切换效果。在 JavaScript 部分，通过 `slideNext` 和 `slidePrev` 函数控制容器的位移值，从而实现了图片的左右无缝滑动切换。另外，我们还使用了 `setInterval` 函数，使图片能够自动切换。

Das obige ist der detaillierte Inhalt vonWie kann in JavaScript ein nahtloser Links-Rechts-Schiebeeffekt von Bildern erzielt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!