11548 sujets

JavaScript, DOM et API Web HTML5

[JS + CSS] Changement auto Background

Bonjour à tous.

Nouveau ici, après une recherche sur google, pour un changement automatique de background, je suis tombé sur votre site. Très sympa!

Voila, je bidouille un peu niveau JavaScript mais pas assez pour y arriver. Je voudrais réaliser la même chose que dans ce topic: http://forum.alsacreations.com/topic-5-45741-1-JQuery-changer-automatiquement-la-couleur-du-background-de-ltbodygt.html

Que le Background change automatiquement toutes .. secondes.

J'ai créer un fichier .js (changejs.js) avec à l'intérieur:

$(document).ready(function(){ 
    (function(){ 
        var i = 0; 
        setInterval(function(){ 
            $("body").removeClass("bg1, bg2, bg3, bg4").addClass("bg"+(i++%4 + 1)); 
        }, 10000); 
    })(); 
});


puis dans mon css:
.bg1 { background-image: url(images/back.jpg) ;} 
.bg2 { background-image: url(images/back2.jpg) ;} 
.bg3 { background-image: url(images/back3.jpg) ;} 
.bg4 { background-image: url(images/back4.jpg) ;}


et rien dans page .html puisque si j'ai tout bon (à cette "étape"), c'est un déclenchement automatique et non un choix par liste.

Dois-je créer un second CSS, unique pour le JavaScript?
Ce JavaScript n'est pas adapter à mon projet?

Si quelqu'un veut bien m'aider, je le remercie par avance! Smiley cligne

Benoît!
Si tu veux une transition dans ton background, perso je te conseillerais plus de mettre une div en fond de page et d'utiliser un effet de transition tout fait (tu en trouveras des tonnes sur le net). Tu auras au moins un effet sympa.
Merci de ta réponse.

Pourquoi pas pour l'utilisation d'une div mais étant une tanche en JS, je ne trouve pas de code sur le net. Beaucoup le proposent mais au clique. Le lien de mon premier post était une bonne base je pense.
J'ai trouvé un exemple sur le net: ici.

Si quelqu'un sait m'aider, je le remercie! Smiley smile
Modifié par Benguiii (20 Jan 2011 - 14:11)
Tu n'as pas besoin d'un second fichier css. Les selecteurs seront pris en compte au fur et à mesure de la manipulation des classes
Igor a écrit :

Probablement Smiley cligne

Et ben non. Marche pas.
Si quelqu'un à un lien. Même pour une div, je suis preneur. Smiley biggrin
J'ai trouvé ce script (Je fais tourner le lien, ca peut servir) qui marche nickel! Mon perfectionnisme, me pousse a vous demander si c'est possible d'insérer un effet "fade", si c'est chiant, lourd? Et quoi mettre surtout. Smiley ohwell

Dans l'attente d'une réponse! Merci Smiley biggrin
Sujet clos
Aller à