Modifier l'arrière-plan-image d'un div avec effet de fondu toutes les 10 secondes avec jquery

Je voudrais créer un diaporama dans la zone d'en-tête de ma page. Il devrait changer l'image d'arrière-plan toutes les 10 secondes, avec un joli effet de fondu. Et depuis que je suis à l'aide de jQuery pour d'autres trucs déjà je voudrais l'utiliser pour cela ainsi.

Donc mon balisage est juste:

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

Et mon CSS pour le moment est:

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

Maintenant ce que je veux, c'est que au bout de 10 secondes, il allait changer de

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

avec une belle lent effet de fondu.

OriginalL'auteur Gogogo | 2011-03-31

  1. 14

    J'ai répondu à une question similaire à Comment remplir la fenêtre de navigateur avec la rotation de l'Image de fond?. Vous pouvez afficher les couleurs de fond, mais pas les images de fond. Vous devez avoir vos images dans <img> tags et de les masquer par défaut display:none;. Donnez à vos images position:absolute et z-index:-1 vos images agit comme un images d'arrière-plan et sont à l'origine de tout le reste. 

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

    Vérifier exemple de travail à http://jsfiddle.net/ewsQ7/5/

    Voici une version qui est plus robuste. Il continuera de cycle et à la décoloration, à partir d'une image à l'autre: jsfiddle.net/jtbowden/hYEzV
    Grand, il ya beaucoup de façons d'améliorer et d'ajouter à ce. Par la façon dont, dans votre exemple, il vous suffit de faire $("#container img").(premier).appendTo('#container').fadeIn(5000).fadeOut(5000); au lieu de l'appeler contenant deux fois.
    Non, parce que à la deuxième convocation, l'ordre DOM a changé. Je suis la décoloration de la première image, de le déplacer à la fin du conteneur, puis enchaîner sur la deuxième image (qui est maintenant le premier) simultanément. Cela donne un cross-fade effet, et me permet de faire une pause entre chaque fade. Mais, oui, il y a beaucoup de façons de le faire.
    Wow c'est exactement ce que je cherchais! Merci beaucoup surtout pour votre exemple!
    B. bravo pour la tripoter de l'homme. totalement m'a aidé avec un extrêmement rapide client maquette. Ne peut pas se servir de quelque chose d'absolu dans ma conception, malheureusement, ce ne verrez jamais de la production, mais les acclamations de toute façon.

    OriginalL'auteur Hussein

  2. 12

    Vous pouvez afficher une image de fond avec CSS3 en utilisant les transitions.

    Vérifier à https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

    Jusqu'jQuery pour changer l'image de fond, mais d'appliquer le style de transition à l'aide de CSS. Chaque fois que le contexte change, il sera transition en fonction de la CSS3 style.

    #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 pour la bonne mise à jour
    Grande réponse. Mais à l'avenir, merci de ne pas utiliser w3schools de confiance de référence. w3fools.com

    OriginalL'auteur Robert Waddell

  3. 0

    Vous ne pouvez pas fondu une image d'arrière-plan. Mais vous pouvez afficher un calque au-dessus de votre tête avec votre prochaine image d'arrière-plan...

    OriginalL'auteur Thomas Menga