Erstellen einer JQuery -Foto -Diashow mit Fadein und Fadeout

Dieser Screencast zeigt, dass eine einfache Diashow mit den Methoden von JQuery fadeIn und fadeOut erstellt wird. Diese Methoden bieten eine bequeme Animationskontrolle über die Sichtbarkeit von Elementen und bieten mehr granuläre Kontrolle als CSS3. Das Video zeigt die Technik und ermöglicht es Ihnen, sie mit anderen Methoden zu vergleichen. [YouTube pxyflux7ibk] Dies ist ein Auszug aus dem Kurs "JQuery: Beyond the Basics", die auf Larningable verfügbar sind.

häufig gestellte Fragen (FAQs)

Stoppen Sie die Diashow:

Um die Diashow zu stoppen, verwenden Sie die Methode von JQuery stop(). Dies beendet sofort jede aktive Animation im Zielelement. Zum Beispiel: $("#slideshow").stop();

Steuergeschwindigkeit steuern:

Passen Sie die Geschwindigkeit von fadeIn und fadeOut an, indem Sie eine Dauer (in Millisekunden) als Parameter angeben. Beispiel: $("#element").fadeIn(2000); (2-Sekunden-Fade).

Zögerungen hinzufügen:

Verwenden Sie die Methode von JQuery delay(), um Pausen zwischen Animationen einzuführen. Zum Beispiel: $("#element").fadeIn().delay(2000).fadeOut(); (2-Sekunden-Verzögerung zwischen Fade-In und Fade-Out).

Verwenden Sie mit verschiedenen Elementen:

Die Methoden fadeIn und fadeOut sind nicht auf Bilder beschränkt; Sie arbeiten an jedem HTML -Element (Divs, Absätze usw.), sofern das Element ursprünglich versteckt ist (über CSS oder JQuery hide() Methode).

Erstellen einer kontinuierlichen Schleife:

, um kontinuierliche Schleifen zu erreichen, kombinieren Sie fadeIn, fadeOut und end() Methoden. Dieses Beispiel verschiebt das erste Bild nach dem Ausgang:

function loop() {
  $("#slideshow img").first().fadeOut().end().appendTo('#slideshow');
  setTimeout(loop, 3000);
}
loop();

Bildunterschriften hinzufügen:

Einfügen von Bildunterschriften, indem Datenattribute innerhalb der <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174002191010970.jpg" class="lazy" alt="Creating a jQuery Photo Slideshow with fadeIn and fadeOut " /> verwendet werden

$("#slideshow img").fadeIn(function() {
  var caption = $(this).data('caption');
  $("#caption").text(caption);
});

Implementierung von Navigationsschaltflächen:

Schaltflächen erstellen und mit JQuery Klickhandlern anhängen. Diese Handler können fadeIn und fadeOut verwenden, um das nächste oder vorherige Bild anzuzeigen. Beispiel (vereinfacht):

$("#prev").click(function() { /* Move first image to beginning */ });
$("#next").click(function() { /* Move first image to end */ });

Hintergrundbilder:

direkt anwenden fadeIn/fadeOut auf Hintergrundbilder nicht möglich, da die Deckkraft das gesamte Element beeinflusst. Sie können jedoch einen ähnlichen Effekt erzielen, indem Sie das Hintergrundbild in eine DIV einwickeln und die Div.

verblassen

Crossfading:

Verblassen gleichzeitig ein Bild, während Sie im nächsten für einen Crossfade -Effekt verblassen. Dies erfordert oft eine absolute Positionierung von Bildern.

Alternativen zu JQuery:

CSS-Übergänge liefern eine jQuery-freie Alternative, obwohl sie mehr manuelle Codierung erfordern. Beispiel (vereinfacht):

function loop() {
  $("#slideshow img").first().fadeOut().end().appendTo('#slideshow');
  setTimeout(loop, 3000);
}
loop();

Diese erweiterte Antwort enthält detailliertere Erklärungen und Codebeispiele für jede FAQ.

Das obige ist der detaillierte Inhalt vonErstellen einer JQuery -Foto -Diashow mit Fadein und Fadeout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!