Ändern Sie hintergrund-Bild von einem div mit der fade-Effekt alle 10 Sekunden mit jquery

Ich würde gerne eine slideshow in den header-Bereich meiner Seite. Es sollte den hintergrund ändern-Bild alle 10 Sekunden mit einem schönen fade-Effekt. Und da bin ich mit jQuery für andere Dinge schon, würde ich Sie gerne für diese als gut.

Also mein markup ist einfach:

<div id="header">
    <!--other stuff here...-->
</div>

Und mein CSS ist im moment:

#header {
    background:  url('images/header_slides/slide_1.jpg') no-repeat;
}

So, jetzt, was ich will, ist, dass nach 10 Sekunden wäre es zu

#header {
    background:  url('images/header_slides/slide_2.jpg') no-repeat;
}

mit einem schönen langsamen fade-Effekt.

InformationsquelleAutor Gogogo | 2011-03-31
  1. 14

    Ich eine ähnliche Frage beantwortet zu Wie fülle ich ein browser-Fenster mit der rotierenden hintergrund Bild?. Sie können fade-hintergrund-Farben, aber nicht die Hintergrundbilder. Sie müssen Ihre Bilder in <img> tags und ausblenden standardmäßig display:none;. Geben Sie Ihren Bildern position:absolute und z-index:-1 Ihre Bilder so wirkt wie ein hintergrund-Bilder und hinter alles andere. 

    function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(10000 * index).fadeIn(10000).fadeOut();
    });
}
test();

    Check funktioniert beispielsweise bei http://jsfiddle.net/ewsQ7/5/

    • Hier ist eine version, die ist stabiler. Es wird weiterhin Zyklus und den übergang von einem Bild zum nächsten: jsfiddle.net/jtbowden/hYEzV
    • Toll, es gibt viele Möglichkeiten, sich zu verbessern, und fügen Sie auf dieser. Durch die Art, wie in Ihrem Beispiel können Sie nur $("#container img").ersten().appendTo('#container').fadeIn(5000).fadeOut(5000); anstelle von aufrufen von container zweimal.
    • Nein, denn durch den zweiten Aufruf der DOM-Reihenfolge geändert hat. Ich bin fast aus dem ersten Bild, bewegen Sie es an das Ende des container, und dann verblassen im zweiten Bild (das ist jetzt das erste) gleichzeitig. Dies gibt einen cross-fade-Effekt, und erlaubt mir die pause zwischen den einzelnen verblassen. Aber, ja, es gibt eine Menge von Möglichkeiten, dies zu tun.
    • Wow, das ist genau das, was ich gesucht habe! Vielen Dank vor allem für dein Beispiel!
    • B. Cheers for the fiddle Mann. Total hat mir geholfen, mit einer enorm schnellen client-mockup gibt. Nicht alles verwenden, was absolut in meinem design leider so das nie sehen, wie die Produktion, aber jubelt trotzdem.
    • B: gibt es eine Möglichkeit zu verhindern, verblassen Elemente im inneren, die gleiche div#container? Ich will, dass es funktioniert wie ein Hintergrundbild und einige andere Elemente darüber. danke.
    • 4 Jahre später... ja, Sie können verwenden Sie diese als hintergrund, wenn Sie wickeln Ihre Seite Elemente getrennt. jsfiddle.net/hYEzV/1237

    InformationsquelleAutor Hussein
  2. 12

    Können Sie verblassen ein Hintergrundbild mit CSS3-übergänge.

    Check it out auf https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

    Für Ihre Verwendung, Aufstellung jQuery ändern Sie das Hintergrundbild, aber den übergang anwenden Stil mit CSS. Wenn der hintergrund ändert, wird er den übergang nach der CSS3-Stil.

    #header
{
    background: url('images/header_slides/slide_1.jpg') no-repeat;
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
}
    • +1 für gutes update
    • Tolle Antwort. Aber in Zukunft bitte nicht verwenden w3schools als Vertrauenswürdige Referenz. w3fools.com
    InformationsquelleAutor Robert Waddell
  3. 0

    Können Sie nicht verblassen ein Hintergrundbild. Doch Sie können verblassen, eine Ebene über deinem #header mit Ihrem nächsten Hintergrundbild...

    InformationsquelleAutor Thomas Menga
Schreibe einen Kommentar