11545 sujets

JavaScript, DOM et API Web HTML5

JQuery changer automatiquement la couleur du background de <body>

Salut,

J'arrive à changer la couleur du background de <body> avec ces lignes dans le fichier .js:


$(document).ready(function(){ 
	$("li.one").click( function(){ $
	("body").removeClass("bg2 , bg3 , bg4").addClass("bg1");
	});
	$("li.two").click( function(){ $
	("body").removeClass("bg1 , bg3 , bg4").addClass("bg2");
	});
	$("li.three").click( function(){ $
	("body").removeClass("bg1 , bg2 , bg4").addClass("bg3");
	});
	$("li.four").click( function(){ $
	("body").removeClass("bg1 , bg2 , bg3").addClass("bg4");
	}); 
});


dans le fichier css:


.bg1 { background: red ;}
.bg2 { background: blue ;}
.bg3 { background: fuchsia ;}
.bg4 { background: yellow ;}


et finalement dans le fichier html:


<li class="one"><a href="#apropos">À Propos</a></li>
<li class="two"><a href="#services">Services</a></li>
<li class="three"><a href="#blogue">Blogue</a></li>
<li class="four"><a href="#contact">Contact</a></li>


Maintenant, j'aimerais modifier le fichier .js pour que ce dernier produise le changement de couleur automatiquement à chaque 10 secondes en boucle.

Quelqu'un peut-il m'aider ? Merci d'avance.
Modifié par Super Gab (18 Dec 2009 - 05:32)
Salut,

À adapter Smiley cligne 
$(document).ready(function(){
	(function(){
		var i = 0;
		setInterval(function(){
			$("body").removeClass("bg1, bg2, bg3, bg4").addClass("bg"+(i++%4 + 1));
		}, 10000);
	})();
});
jo_link_noir a écrit :
Salut,

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


Wow, super! Merci.

Je ne sais pas si j'en demande trop mais si jamais je souhaitais effectuer une transition, par exemple un fade dans le cas où mes backgrounds seraient des images...

Serait-ce beaucoup plus compliqué ?
Sujet clos
Aller à