11550 sujets

JavaScript, DOM et API Web HTML5

Affichage aléatoire de 6 images

Bonjour,

Voici mon code pour afficher aléatoirement 1 image parmi une centaine : 


var listImgLength = $('#imgBlock li').length;
var randNum = Math.floor ( Math.random ( ) * listImgLength + 1);
$('#imgBlock li').eq(randNum-1).show();


Cela marche très bien.
Par contre, comment faire pour afficher 4 images aléatoirement ? Pour que ça ne soient pas les mêmes ?

Merci,

Raphaël
Bonjour.

Une piste (je l'espère) : peut-être faudrait-il avant d'afficher les images faire un tableau de ces 4 images ? Ainsi lors du choix d'une nouvelle image, tu pourrais vérifier qu'elle n'est pas déjà dans le tableau.

J'espère que ça pourra t'aider.
Modifié par SolidSnake (29 Aug 2011 - 16:26)
A quoi ressemble ton html exactement.
Parce que si je comprends bien ton bout de JS, tu charges ta centaine de photos, mais tu n'en affiches que 4, c'est bien ça ?
Modifié par SolidSnake (30 Aug 2011 - 13:51)
Bon si je me fie à mon intuition, ton html devrait ressembler à ça :
<ul id="imgBlock">
	<li style="display:none">1</li>
	<li style="display:none">2</li>
	<li style="display:none">3</li>
	<li style="display:none">4</li>
	<li style="display:none">5</li>
	<li style="display:none">6</li>
	<li style="display:none">7</li>
	<li style="display:none">8</li>
	<li style="display:none">9</li>
	<li style="display:none">10</li>
</ul>


En conséquence ton js pourrait être ça (en fait, pas besoin de tableau) :
var randNum, boucle = 0;
var listImgLength = $('#imgBlock li').length;

while (boucle != 4) {
	randNum = Math.floor ( Math.random ( ) * listImgLength + 1);
	if ($('#imgBlock li').eq(randNum-1).css('display') == 'none' ) {
		$('#imgBlock li').eq(randNum-1).show();
		boucle++;
	}
}


J'espère avoir pu t'aider.
Modifié par SolidSnake (30 Aug 2011 - 14:10)
Salut,

Comme ton code HTML est absent, je suis parti du principe que ta centaines d'images sont insérées avec une liste <ul><li>

Du coup, voici le code que je te propose:
J'ai repris ton code, et je l'ai inséré dans une boucle while qui tourne tant que l'on a pas X bloc visible. A chaque itération, on calcule un nombre aléatoire et on affiche la div

Pour le html/css

<!DOCTYPE html> <!-- PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> -->
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset="UTF-8"> 
  <link href="css/styles.css" rel="stylesheet" type="text/css"> 
  <title>bouton</title> 

	<style type="text/css">

	body
	{
		background-color: #E9E9E9;
		font-family: verdana;
		font-size: 15px;
		margin: 0px;
		padding: 0px;
	}

	#menu
	{
		margin: 0px;
		padding: 0px;
	}

	#nav
	{
		margin: 20px;
		padding: 15px;
		padding-left: 5px;
		background: #E9E9E9;
	}

	#nav li
	{
		display: none;
		background: #FFF;
		padding: 10px;
		display: none;
		width: 70px;
	}
	</style>

	<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

</head>

<body> 
	<div id="menu">
		<ul id="nav">
			<li>Page 0</li>
			<li>Page 1</li>
			<li>Page 2</li>
			<li>Page 3</li>
			<li>Page 4</li>
			<li>Page 5</li>
			<li>Page 6</li>
			<li>Page 7</li>
			<li>Page 8</li>
			<li>Page 9</li>
			<li>Page 10</li>
			<li>Page 11</li>
		</ul>
	</div> 
</body> 

</html>



et le code javascript:


	var nbimage = 4;
	var listImgLength = $('#nav li').length;
	
	while ($('#nav li:visible').length <= nbimage)
	{
		var randNum = Math.floor ( Math.random ( ) * listImgLength + 1);
		if( $('#nav li').is(':hidden') )
		{
			$('#nav li').eq(randNum-1).css('display','block');
		}
	}


[EDIT]
Oups... trop tard
Modifié par mamax (30 Aug 2011 - 13:58)
Sujet clos
Aller à