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.

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!