Wie erziele ich einen Slide-Effekt mit CSS? So implementieren Sie eine Diashow (Codebeispiel)

Der Inhalt dieses Artikels besteht darin, vorzustellen, wie man mit CSS einen Folieneffekt erzielt. So implementieren Sie eine Diashow (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Im Folgenden implementieren wir den Folienwechseleffekt (Ein- und Ausblenden) Schritt für Schritt durch den Code:

1. Erstellen Sie eine HTML-Datei und schreiben Sie eine Demo

Zuerst müssen wir eine Liste von Bildern auf der Seite einrichten, die in einer Div-Box enthalten ist. Etwa so:

<div id="stage">
	<a href="img/Wie erziele ich einen Slide-Effekt mit CSS? So implementieren Sie eine Diashow (Codebeispiel)"><img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie erziele ich einen Slide-Effekt mit CSS? So implementieren Sie eine Diashow (Codebeispiel)" ></a>
	<a href="img/2.jpg"><img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie erziele ich einen Slide-Effekt mit CSS? So implementieren Sie eine Diashow (Codebeispiel)" ></a>
	<a href="img/3.jpg"><img  src="/static/imghw/default1.png"  data-src="img/3.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie erziele ich einen Slide-Effekt mit CSS? So implementieren Sie eine Diashow (Codebeispiel)" ></a>
	<a href="img/4.jpg"><img  src="/static/imghw/default1.png"  data-src="img/4.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie erziele ich einen Slide-Effekt mit CSS? So implementieren Sie eine Diashow (Codebeispiel)" ></a>
	<a href="img/5.jpg"><img  src="/static/imghw/default1.png"  data-src="img/5.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie erziele ich einen Slide-Effekt mit CSS? So implementieren Sie eine Diashow (Codebeispiel)" ></a>
	<a href="img/6.jpg"><img  src="/static/imghw/default1.png"  data-src="img/6.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie erziele ich einen Slide-Effekt mit CSS? So implementieren Sie eine Diashow (Codebeispiel)" ></a>
	<a href="img/7.jpg"><img  src="/static/imghw/default1.png"  data-src="img/7.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie erziele ich einen Slide-Effekt mit CSS? So implementieren Sie eine Diashow (Codebeispiel)" ></a>
	<a href="img/8.jpg"><img  src="/static/imghw/default1.png"  data-src="img/8.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="Wie erziele ich einen Slide-Effekt mit CSS? So implementieren Sie eine Diashow (Codebeispiel)" ></a>
</div>

In diesem Beispiel haben alle Bilder Links, dies ist jedoch nicht erforderlich. Wenn Sie den Link entfernen, müssen Sie lediglich etwas CSS und JavaScript ändern, um auf „img“ anstelle von „a“ zu verweisen.

2. Verwenden Sie CSS, um Bilder zu überlagern

Hier ist der CSS-Code, den wir für die folgende Demo verwendet haben:

#stage {
    margin: 1em auto;
    width: 382px;
    height: 292px;
  }

  #stage a {
    position: absolute;
  }
  #stage a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
  }

  #stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 4s;
    animation-duration: 1s;
    z-index: 20;
  }
  #stage a:nth-of-type(2) {
    z-index: 10;
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }

Durch Festlegen des link Für position:absolute nehmen wir alle Bilder aus dem Dokumentenstrom und stapeln sie zusammen. Anschließend müssen wir eine Breite und Höhe für die #Bühne angeben, um auf der Seite Platz für die Diashow zu reservieren. Dies entspricht den Bildabmessungen plus Abstand (10 Pixel pro Seite) und Ränder (1 Pixel pro Seite).

Dann verwenden wir einige nth-of-type()-Selektoren, um das erste Bild oben auf den Stapel zu legen, das zweite Bild hinten auf den Stapel und die restlichen Bilder aus der Anzeige auszublenden.

Schließlich weisen wir dem oberen Bild einen Animations-Keyframe zu und weisen es an, 4 Sekunden zu warten, bevor es ausgeblendet wird, und legen die Deckkraft auf 0 fest. Jetzt fehlt nur noch ein bisschen JavaScript, um das gegenüberliegende Bild an den unteren Rand des Stapels zu verschieben, damit das nächste Bild der Reihe nach erscheinen und ausgeblendet werden kann.

3. Verwenden Sie JavaScript, um den Effekt auszulösen

Hier muss lediglich dem Bild ein Event-Handler zugewiesen werden, der ausgelöst wird, wenn die Keyframe-Animation endet. Es nimmt das wichtigste Foto auf und verschiebt es nach hinten:

window.addEventListener("DOMContentLoaded", function(e) {
    var stage = document.getElementById("stage");
    var fadeComplete = function(e) { stage.appendChild(arr[0]); };
    var arr = stage.getElementsByTagName("a");
    for(var i=0; i < arr.length; i++) {
      arr[i].addEventListener("animationend", fadeComplete, false);
    }

  }, false);

Das neue Bild oben wird nun als nth-of-type(1)-Attribut angenommen, einschließlich Keyframe-Animation --fader und so weiter auf Andere Bilder.

Das ist es! Kein aufgeblähter Code, keine Plugins, keine Bibliotheken, nur ein paar Zeilen Vanilla-JavaScript, das in allen modernen Browsern funktioniert.

4. Rendern:

Führen Sie den obigen Code aus, um eine einfache Ein- und Ausblend-Diashow zu erhalten:

Zusammenfassung: Das Obige ist der in diesem Artikel erzielte Ein- und Ausblendeffekt. Sie können es selbst ausprobieren, um Ihr Verständnis zu vertiefen.

Das obige ist der detaillierte Inhalt vonWie erziele ich einen Slide-Effekt mit CSS? So implementieren Sie eine Diashow (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!