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)">

image aléatoire avec math.random()

JavaScript

Vue hybride

Discussions similaires

Partager

Partager