image aléatoire avec math.random()

**aphroz** · 17/03/2010, 19h37

Bonjour,

je souhaiterais afficher de manière aléatoire et avec un effet de fading des images ayant les id telles que #img1, #img2 .. #imgn.

Pour ce faire j'utilise le script suivant dans le head:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript">
var tm=1;
var i=1;
$(document).ready(function rndimage(){
			while(i<1000){
			$("#img"+Math.floor(Math.random()*5)).fadeOut('slow').delay(700*Math.floor(Math.random()*5)+1).fadeIn('slow').delay(700*Math.floor(Math.random()*5)+1);
			i++;	
			} ;
		}
	);
 
</script>

Cependant j'ai l'impression que les nombres aléatoires ne le sont pas vraiment (c'est à dire que l'image ayant l'id #img0 a un délai plus petit, etc..)

Est-ce quelqu'un aurait une solution?

Merci de votre aide!

**SpaceFrog** · 17/03/2010, 19h45

en principe non mais c'est surtout la façon d'attribuer le random dans une boucle sur 1000 ... avec un delay ...

je pense que tu aurais un meilleur resultat en passant par un setInterval

**aphroz** · 17/03/2010, 21h20

Merci pour ta réponse, apparemment setInterval pose des problèmes avec Firefox, j'ai donc utilisé setTimeout.

Voici le code si jamais..

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
function rndimage(){
			$("#img"+Math.floor(Math.random()*5)).fadeOut('slow').delay(2000).fadeIn('slow');
			setTimeout("rndimage()",1000);
		};
</script>
 
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<script type="text/javascript">
rndimage();
</script>

Merci pour ton aide.

**andry.aime** · 18/03/2010, 06h38

Bonjour,
setInterval marche nickel avec FireFox.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function rndimage(){
			$("#img"+Math.floor(Math.random()*5)).fadeOut('slow').delay(2000).fadeIn('slow');
		};

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="setInterval('rndimage()',1000)">

**SpaceFrog** · 18/03/2010, 08h21

En effet setInterval ne pose aucun problème à ma connaissance sous firefox ...
Par contre il est plus efficace avec une fonction plutot qu'un string ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="setInterval(function(){rndimage()},1000)">

**matrix78** · 20/03/2010, 20h18

Voila je débute, sur mon site, j ai créer un block image alléatoire, je n'arrive pas a mettre en place la fonction random, parcontre a chaque refresch de mon index l'image change.
Voici le code mis en place

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
 
begin_block("Torrent Aléatoire"); 
 
$res = mysql_query("SELECT id, name, seeders, leechers, image1
 FROM torrents WHERE  banned='no' ORDER BY RAND() LIMIT 1"); 
 
$row = mysql_fetch_assoc($res);
 
echo "<div align=center border=0>";
 
 
$text = $row["name"];
$newtext = wordwrap($text, 25, "<br />\n", 1);
 
print ("<center><br><b>ID N° : ".$row["id"]."<br><br>Nom du Torrent : <br><br><font color=teal>".$newtext."</font></b><br><br>");
 
print ("<b>Seeders : <img src=images/seeders.gif border=0 title='Seeders'>&nbsp;" . $row["seeders"] . "&nbsp;&nbsp;");
print ("<br><br>Leechers : <img src=images/leechers.gif border=0 title='Leechers'>&nbsp;" . $row["leechers"] . "</b><br><br>");
 
  if ($row["image1"] == "")     $row["image1"] = "noimage1.jpg";
 
$img1 = "<IMG src=uploads/images/".$row["image1"]." width=160 border=0>";
 
print("<a href=torrents-details.php?id=".$row["id"]." target=_blank>". $img1 . "</a><br></center>");
 
echo "</div>";
 
end_block();
 
 
?>

**nod__** · 21/03/2010, 00h48

Envoyé par SpaceFrog

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="setInterval(function(){rndimage()},1000)">

Pour le coup pas besoin de se compliquer la vie, pas de paramètres donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="setInterval(rndimage, 1000)">

**andry.aime** · 22/03/2010, 05h59

Bonjour,
setInterval attend un String comme premier paramètre

**nod__** · 22/03/2010, 07h42

Bonjour, pas du tout.

Il accepte un string, mais il attend une fonction ou une référence à une fonction. Si tu lui passes un string il va alors utilier eval() pour executer la fonction et rassure moi, on est bien d'accord que eval c'est le mal ?

https://developer.mozilla.org/en/DOM/window.setInterval

**SpaceFrog** · 22/03/2010, 08h35

+1 Nod
setinterval accepte un string, mais attend une fonction, si tu lui fournit un string comme le dit justement nod il est obligé de l'interpréter...

De plus tu parles de premier paramètre...
il est a noter que normalement il devrait en accepter 3, le troisième devant être les paramètres passés à la fonction. Hors ce n'est pas crossbrowser.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setInterval("mafonction()",temps,paramètres)

n'est pas implémenté par tous les browsers

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setInterval("mafonction(paramètres)",temps)

ne fonctionne guère mieux

Il faut passer par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setInterval(fonction(){mafocntion(paramètres)},temps)

image aléatoire avec math.random()

JavaScript

Discussions similaires

Partager

Partager