So erstellen Sie mithilfe von CSS einen nahtlosen Bildlaufleisteneffekt

So erstellen Sie mit CSS eine nahtlos scrollende Bildanzeigeleiste

Mit der Entwicklung des Internets ist die Bildanzeige zu einem wesentlichen Bestandteil vieler Website-Designs geworden. Der nahtlose Bildlaufleisteneffekt kann die Aufmerksamkeit der Benutzer erregen und den visuellen Effekt und die Benutzererfahrung der Website verbessern. In diesem Artikel werde ich Ihnen zeigen, wie Sie mit CSS einen nahtlosen Bildlaufeffekt in der Anzeigeleiste erzielen, und konkrete Codebeispiele bereitstellen.

Der Effekt der nahtlos scrollenden Bildanzeigeleiste hängt hauptsächlich von den CSS-Animationseigenschaften und dem Layout ab. Nachfolgend finden Sie die Schritte und ein Codebeispiel, um diesen Effekt zu erzielen.

Schritt eins: Schreiben der HTML-Struktur

Zuerst müssen wir die HTML-Struktur schreiben, um die Bilder und den Anzeigebereich unterzubringen. Im Beispiel verwenden wir ein div-Element als äußeren Container und ein ul-Element im Inneren als Container für die Bildanzeige. Jedes li-Element im ul-Element ist ein Bildelement.

<div class="slideshow-container">
  <ul class="slideshow">
    <li><img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1"></li>
    <li><img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2"></li>
    <li><img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3"></li>
    <!-- 更多图片项 -->
  </ul>
</div>

Schritt 2: CSS-Stile festlegen

Als nächstes müssen wir CSS-Stile für die HTML-Struktur festlegen und diese aktivieren, um nahtloses Scrollen zu ermöglichen. Zuerst müssen wir den Container und den Anzeigebereich gestalten.

.slideshow-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slideshow {
  width: 100%;
  height: 100%;
  display: flex;
  animation: slide 10s infinite;
}

.slideshow li {
  flex-shrink: 0;
}

Im obigen Beispiel setzen wir die Breite des Containers auf 100 % und blenden den Überlaufinhalt aus. Der Anzeigebereich ist auf 100 % Breite eingestellt und auf ein Inline-Blockelement eingestellt, um eine horizontale Anordnung der Bilder zu erreichen. Der Anzeigebereich verwendet die CSS-Animationseigenschaft Animation und legt den Namen, die Dauer und die Endlosschleife der Animation fest.

Schritt 3: JavaScript-Code hinzufügen

Um schließlich den nahtlosen Scrolleffekt zu erzielen, müssen wir JavaScript verwenden, um die Position des Bildes zu manipulieren. Das Folgende ist ein einfacher Beispielcode, der den Bildlaufeffekt durch Ändern des linken Werts des Anzeigebereichs erzielt.

function slideImages() {
  var slideshow = document.querySelector('.slideshow');
  var firstImage = slideshow.querySelector('li');
  firstImage.addEventListener('transitionend', resetImagePosition);

  function resetImagePosition() {
    firstImage.style.transition = 'none';
    firstImage.style.transform = 'translateX(0)';
    setTimeout(startSlide, 0);
  }

  function startSlide() {
    firstImage.removeEventListener('transitionend', resetImagePosition);
    firstImage.style.transition = 'transform 5s ease-in-out';
    firstImage.style.transform = 'translateX(-100%)';
  }

  startSlide();
}

slideImages();

Im obigen Code erhalten wir zuerst die Elemente des Anzeigebereichs und die Elemente des ersten Bildes und hören uns dann das Endereignis der Übergangsanimation des ersten Bildes an. Wenn die Übergangsanimation endet, erzielen wir einen nahtlosen Scrolleffekt, indem wir die Bildposition zurücksetzen und eine neue Übergangsanimation hinzufügen.

Das Obige sind die spezifischen Schritte und Codebeispiele für die Verwendung von CSS zum Erstellen eines nahtlosen Bildlaufleisteneffekts. Sie können es entsprechend Ihren Anforderungen anpassen und modifizieren, um einen reichhaltigeren und vielfältigeren Bildanzeigeeffekt zu erzielen. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mithilfe von CSS einen nahtlosen Bildlaufleisteneffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!