Einfacher Karussell-Bildwiedergabeeffekt, implementiert durch JavaScript und CSS (Quellcode im Anhang)

Karussellbilder stehen oft im Mittelpunkt, werden in Fotogalerien verwendet oder stehen auf vielen modernen Websites im Mittelpunkt. Während Adobe Flash in der Vergangenheit oft das Mittel der Wahl für die Arbeit mit CSS3 und JavaScript war, lassen sich Karussells ganz einfach und ohne viel Code umsetzen.

Die Technik, die ich hier verwende, ist eine der einfachsten Möglichkeiten, ein einfaches Karussell mit einem schönen Überblendungsübergang mithilfe von Standard-JavaScript und CSS3 zu implementieren.

Einfaches HTML ist trivial. Fügen Sie einfach ein paar Bilder in einen Div-Container ein:

<div class="slides">
  <img  src="/static/imghw/default1.png"  data-src="image/cup.jpg"  class="lazy"    alt="Einfacher Karussell-Bildwiedergabeeffekt, implementiert durch JavaScript und CSS (Quellcode im Anhang)" >
  <img  src="/static/imghw/default1.png"  data-src="image/flower.jpg"  class="lazy"   alt="Einfacher Karussell-Bildwiedergabeeffekt, implementiert durch JavaScript und CSS (Quellcode im Anhang)" >
  <img  src="/static/imghw/default1.png"  data-src="image/flowers.jpg"  class="lazy"   alt="Einfacher Karussell-Bildwiedergabeeffekt, implementiert durch JavaScript und CSS (Quellcode im Anhang)" >
  <img  src="/static/imghw/default1.png"  data-src="image/strawberry.jpg"  class="lazy"   alt="Einfacher Karussell-Bildwiedergabeeffekt, implementiert durch JavaScript und CSS (Quellcode im Anhang)" >
  <img  src="/static/imghw/default1.png"  data-src="image/greatwall.jpg"  class="lazy"   alt="Einfacher Karussell-Bildwiedergabeeffekt, implementiert durch JavaScript und CSS (Quellcode im Anhang)" >
</div>

Verwenden Sie CSS, um alle Bilder im Container zu stapeln und Übergänge zu definieren (für Übergänge müssen möglicherweise browserspezifische Präfixe verwendet werden):

/* the slide container with a fixed size */
.slides {
  box-shadow: 0px 0px 6px black;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  position: relative;
  }
  /* the images are positioned absolutely to stack. opacity transitions are animated. */
  .slides img { 
  display: block;
  position: absolute; 
  transition: opacity 1s;
  opacity: 0;
  width: 100%;
  }
  /* the first image is the current slide. it's faded in. */
  .slides img:first-child { 
  z-index: 2; 
  /* frontmost */
  opacity: 1;
  }
  /* the last image is the previous slide. it's behind the current slide and it's faded over. */
  .slides img:last-child {
  z-index: 1; 
  /* behind current slide */
  opacity: 1;
  }

Nach dieser einfachen Einrichtung müssen Sie nur noch die Reihenfolge des Karussells ändern, um das Karussell voranzutreiben. Der folgende Codeausschnitt verschiebt das erste Bild (das aktuelle Bild) regelmäßig an das Ende des Containers, wodurch das nächste Bild zum aktuellen Bild wird. Aufgrund der oben definierten CSS-Regeln werden die Änderungen mit einer Überblendung animiert.

function nextSlide() {
    var q = function(sel) {
     return document.querySelector(sel); 
     }   
    q(".slides").appendChild(q(".slides img:first-child"));
    }
    setInterval(nextSlide, 3000)

Das Obige ist die Analyse der Schritte

	
	
	


<div class="slides">
  <img  src="/static/imghw/default1.png"  data-src="image/cup.jpg"  class="lazy"    alt="Einfacher Karussell-Bildwiedergabeeffekt, implementiert durch JavaScript und CSS (Quellcode im Anhang)" >
  <img  src="/static/imghw/default1.png"  data-src="image/flower.jpg"  class="lazy"   alt="Einfacher Karussell-Bildwiedergabeeffekt, implementiert durch JavaScript und CSS (Quellcode im Anhang)" >
  <img  src="/static/imghw/default1.png"  data-src="image/flowers.jpg"  class="lazy"   alt="Einfacher Karussell-Bildwiedergabeeffekt, implementiert durch JavaScript und CSS (Quellcode im Anhang)" >
  <img  src="/static/imghw/default1.png"  data-src="image/strawberry.jpg"  class="lazy"   alt="Einfacher Karussell-Bildwiedergabeeffekt, implementiert durch JavaScript und CSS (Quellcode im Anhang)" >
  <img  src="/static/imghw/default1.png"  data-src="image/greatwall.jpg"  class="lazy"   alt="Einfacher Karussell-Bildwiedergabeeffekt, implementiert durch JavaScript und CSS (Quellcode im Anhang)" >
</div>

Der Effekt ist wie folgt:

Das obige ist der detaillierte Inhalt vonEinfacher Karussell-Bildwiedergabeeffekt, implementiert durch JavaScript und CSS (Quellcode im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!