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 effet de fondu. Et puisque j'utilise JQuery pour d'autres choses déjà, j'aimerais aussi l'utiliser pour cela aussi.
Donc, mon balisage est juste: P>
#header {
background: url('images/header_slides/slide_2.jpg') no-repeat;
}
3 Réponses :
Vous ne pouvez pas fauser d'une image d'arrière-plan. Mais vous pouvez foncer une couche au-dessus de votre #Header avec votre image de fond suivante ...
J'ai répondu à une question similaire à Comment Pour remplir la fenêtre du navigateur avec une image de fond tournante? . Vous pouvez fader les couleurs de fond mais pas des images de fond. Vous devez avoir vos images dans code> les balises et les masquer par défaut
affichage: aucun; code>. Donnez votre image Position: absolu code> et z-index: -1 code> de sorte que vos images agissent comme une image d'arrière-plan et sont derrière tout le reste. function test() {
$("img").each(function(index) {
$(this).hide();
$(this).delay(10000 * index).fadeIn(10000).fadeOut();
});
}
test();
Voici une version plus robuste. Il continuera à faire du vélo et de disparition d'une image à la suivante: jsfiddle.net/jtbowden/hyezv
Génial, il existe de nombreuses façons d'améliorer et d'ajouter à cette question. Au fait, dans votre exemple, vous pouvez simplement faire $ ("# conteneur img"). Premier (). Appendez ('# conteneur'). Fadein (5000) .fadeout (50 00); au lieu d'appeler le conteneur deux fois.
Non, car par le deuxième appel, l'ordre DOM a changé. Je décolore la première image, le déplaçant vers la fin du conteneur, puis la décoloration de la seconde image (qui est maintenant la première) simultanément. Cela donne un effet transversal et me permet de faire une pause entre chaque fondu. Mais oui, il y a beaucoup de façons de faire cela.
Wow c'est exactement ce que je cherchais! Merci beaucoup surtout pour votre exemple!
@Jeff B. acclamations pour le violon man. Totalement m'aidé avec une maquette de client extrêmement rapide. Je ne peux pas utiliser quoi que ce soit absolu dans mon design malheureusement, donc cela ne verra jamais la production, mais à l'acclamation.
@Jeff B: Y a-t-il un moyen d'empêcher les éléments de décomposition à l'intérieur de ce même conteneur DIV #? Je veux que cela fonctionne comme une image d'arrière-plan et que d'autres éléments au-dessus de cela. Merci.
4 ans plus tard ... Oui, vous pouvez l'utiliser comme arrière-plan, si vous enveloppez vos éléments de page séparément. JSFIDDLE.net/HYEZV/1237
Vous pouvez foncer une image d'arrière-plan avec CSS3 à l'aide de transitions.
Vérifiez-le à https://developer.mozilla.org/en-us/docs/web/guide/css/buant_csss_transitions
Pour votre utilisation, configurez JQuery pour changer le image d'arrière-plan, mais appliquez le style de transition à l'aide de CSS. Chaque fois que les changements d'arrière-plan changent, il transition selon le style CSS3.
Très bonne réponse. Mais à l'avenir, n'utilisez pas de luthols W3SS comme référence de confiance. w3fools.com