intégration fonction javascript ou jquery

Question

Bonjour, 

j'ai trouvé un script qui semble être un mixte javascript et jquery pour faire des bannières, mais j'aimerais y ajouter une fonction pour rendre les images aléatoires.

Voici le code en question :

var interval_ban = 8000;

function switchBan(id)
{
	var c = $("#" + id + " div");
	if (c.length > 1) {
		var el = $("#" + id + " div:visible").hide().next();
		if (el.length) {
			el.fadeIn("slow");
		} else {
			$("#" + id + " div:first").fadeIn("slow");
		}
		setTimeout("switchBan('" + id + "')", interval_ban);
	}
}


$(function() {
	$("#o_zp").click(function() {
		alert("Bientôt dispoble !");
	});
	
	/*
	$("#o_en").click(function() {
		alert("Coming soon!");
		return false;
	});
	*/
	
	
	$(".zone_ban div").hide();
	$("#ban_zone1 div:first").show();
	$("#ban_zone2 div:first").show();
	$("#ban_zone3 div:first").show();
	$("#ban_zone4 div:first").show();
	
	setTimeout("switchBan('ban_zone1')", interval_ban);
	setTimeout("switchBan('ban_zone2')", interval_ban);
	setTimeout("switchBan('ban_zone3')", interval_ban);
	setTimeout("switchBan('ban_zone4')", interval_ban);
	
	$('#ban_zone1 div img').random();
	
	$("#courriel").focus(function(){
		$(this).val("");
	});
	
	$("#ea").focus(function(){
		$(this).val("");
	});
	
	
	$("#b_desabonnement").click(function(){
		$("#action").val("desabonnement");
		$("#f_bulletin").submit();
		return false;
	});
	
	$("#keyWord").focus(function(){
	    if ( $(this).val() == "rechercher" || $(this).val() == "search" ) {
	        $(this).val("");
	    }
	});
	
});

Merci!

Configuration: Mac OS X / Firefox 6.0.2

rodoplop · Answer

C'est bien du JQuery utilisé ici,

ton problème vient du tout début

var el = $("#" + id + " div:visible").hide().next();


il prend ton toujours les élements dans l'ordre. en prenant le suivant (avec next)

et si il arrive a la fin, il retourne sur le premier 


$("#" + id + " div:first").fadeIn("slow");


si tu veux de l'aléatoire, il faut utiliser la fonction Math.random() et Mathfloor()

plus d'infos ici https://www.commentcamarche.net/contents/578-javascript-l-objet-math


Math.floor(Math.random() * 4)+1;


cette fonction te calcul un nombre entre 1 et 4.

ensuite tu fait ton affichage avec 


var el = $("#" + id + " div:visible").hide().next();


sauf qu'au lieu d'utiliser id tu utilise le nombre calculer

Bonne soirée

marcelpeju · Answer

En fait, je ne suis pas très familier avec javascript et j'ai du mal à comprendre comment intrégrer la fonction Math.floor(Math.random() * 4)+1; et tout le reste.

rodoplop · Answer

en relisant, je voit que j'ai fait une petite erreur d'interprétation, il n'y a pas que 4 baniere mais 4 zones de bannière afficher en même temps non ?

il faudrait savoir combien il y a de bannière au total dans une zone.

a partir de là on pourra utiliser la fonction de génération de nombre aléatoire.

marcelpeju · Answer

Dans la première, il y en à 13, 
2e : 2
3e : 4
4e : 2

rodoplop · Answer

Si tu essaye quelque chose comme cela ?


function switchBan(id)
{
	var c = $("#" + id + " div");
	if (c.length > 1) {

   //cache les div affichés
   $("#" + id + " div:visible").hide();

   //on sélectionne un nouvelle élement au hasard
   var el = $("#" + id + " div").get().sort(function(){ 
   return Math.round(Math.random())-0.5;
}).slice(0,1);

		if (el.length) {
			el.fadeIn("slow");
		} else {
			$("#" + id + " div:first").fadeIn("slow");
		}
		setTimeout("switchBan('" + id + "')", interval_ban);
	}
}

marcelpeju · Answer

Ce n'est pas encore ça. les bannières affichent la première image de la série et après, elles disparaissent.

rodoplop · Answer

A tête reposé, est ce que quelque chose comme cela correspond plus :


function switchBan(id)
	{
		var c = $("#" + id + " div");
		if (c.length > 1) {

	   //cache les div affichés
	   $("#" + id + " div:visible").hide();

	   //on sélectionne un nouvelle élement au hasard
	   var num = Math.round(Math.random()*(c.length-1));
	   $("#" + id + " div").slice(num,num+1).fadeIn("slow");;

			if (el.length) {
				el.fadeIn("slow");
			} else {
				$("#" + id + " div:first").fadeIn("slow");
			}
			setTimeout("switchBan('" + id + "')", interval_ban);
		}
	}


On selectionne un element compris entre 0 et le nombre maximum d'element et ensuite on applique un fadein sur cet élement.

marcelpeju · Answer

Maintenant, il affiche la première image et passe de façon aléatoire à une deuxième, mais il s'arrête là. Est ce que c'est parce que certaines bannières n'ont que 2 images?

rodoplop · Answer

bha si je n'ai pas fait d'erreur, en utilisant la valeur c.length, sa devrait me prendre un élément entre 0 et n-1 (ou n = le nombre d'élément et on fait -1 car l'indice commence à 0)

donc pour la première bannière il devrait a chaque fois afficher une bannière entre 1 et 13 pour la première, 1 et 2 pour la seconde et la quatrième et pour finir entre 1 et 4 pour la troisième.

donc peut importe le nombre d'élément, il devrait toujours afficher un élément de ta bannière dans chaque zone.

par contre effectivement si certaines n'ont que deux images, il est possible que ce soit la meme qui s'affiche plusieurs fois  la suite.

par contre pour celle a 13 image, il affiche lus que deux bannière différentes ?

marcelpeju · Answer

Tout s'arrête effectivement à la deuxième image pour toutes les bannières et la première images est toujours la première de la série.

Intégration fonction javascript ou jquery

10 réponses

Discussions similaires

Newsletters