While en JavaScript

Question

Je le code JavaScript suivant pour obtenir une image aléatoire à partir d'une liste d'images disponibles:

<script type="text/javascript">// <![CDATA[ 
var image = new Array(); 
var link = new Array(); 

image[0] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus01_small.png'; 
image[1] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus02_small.png'; 
image[2] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus03_small.png'; 
image[3] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus04_small.png'; 
image[4] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus05_small.png'; 
image[5] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus06_small.png'; 
image[6] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus07_small.png'; 
image[7] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus08_small.png'; 
image[8] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus09_small.png'; 
image[9] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus10_small.png'; 
image[10] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus11_small.png'; 
image[11] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus12_small.png'; 
image[12] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus13_small.png'; 
image[13] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus14_small.png'; 
image[14] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus15_small.png'; 
image[15] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus16_small.png'; 
image[16] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus17_small.png'; 
image[17] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus18_small.png'; 
image[18] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus19_small.png'; 
image[19] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus20_small.png'; 
image[20] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus21_small.png'; 
image[21] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus22_small.png'; 
image[22] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus23_small.png'; 
image[23] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus24_small.png'; 
image[24] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus26_small.png'; 
image[25] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus27_small.png'; 
image[26] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus28_small.png'; 
image[27] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus29_small.png'; 

link[1] = 'http://www.ovlu.li/ornitholog/cms/index.php?page=bildergalerie'; 

var num = Math.random(); 
var ran = Math.floor((image.length - 1) * num) + 1; 

document.write('<a href="' + link[1] + '" mce_href="' + link[1] + '"><img src="' + image[ran] + '" mce_src="' + image[ran] + '" border="0" + width="200" /></a>'); 
// ]]></script> 

Maintenant, je voudrais changer le code pour qu'il y ait trois images aléatoires. J'ai été capable de le faire, en utilisant simplement ce code trois fois. Malheureusement, il y a la possibilité que les mêmes images soient choisies au hasard plusieurs fois. Alors, comment puis-je éviter que la même image soit choisie plusieurs fois? Je pense que je dois maintenir une liste d'images sélectionnées et ensuite choisir une nouvelle image de manière aléatoire jusqu'à ce qu'une image qui n'est pas dans la liste soit choisie. Mais comment je fais ça?

Answer 1

<script type="text/javascript">// <![CDATA[ 
var image = []; 
var link = []; 

image[0] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus01_small.png'; 
image[1] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus02_small.png'; 
image[2] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus03_small.png'; 
image[3] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus04_small.png'; 
image[4] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus05_small.png'; 
image[5] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus06_small.png'; 
image[6] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus07_small.png'; 
image[7] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus08_small.png'; 
image[8] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus09_small.png'; 
image[9] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus10_small.png'; 
image[10] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus11_small.png'; 
image[11] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus12_small.png'; 
image[12] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus13_small.png'; 
image[13] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus14_small.png'; 
image[14] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus15_small.png'; 
image[15] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus16_small.png'; 
image[16] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus17_small.png'; 
image[17] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus18_small.png'; 
image[18] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus19_small.png'; 
image[19] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus20_small.png'; 
image[20] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus21_small.png'; 
image[21] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus22_small.png'; 
image[22] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus23_small.png'; 
image[23] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus24_small.png'; 
image[24] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus26_small.png'; 
image[25] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus27_small.png'; 
image[26] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus28_small.png'; 
image[27] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus29_small.png'; 

link[1] = 'http://www.ovlu.li/ornitholog/cms/index.php?page=bildergalerie'; 
function pickImage(){ 
    var pick = Math.floor(Math.random()*image.length); 
    var img = image.splice(pick, 1); 

    document.write('<a href="' + link[1] + '" mce_href="' + link[1] + '"><img src="' + img + '" mce_src="' + img + '" border="0" + width="200" /></a>'); 
} 

pickImage(); 
pickImage(); 
//add as much pickImage(); as you want 
// ]]></script> 

Answer 2

Je recommande de mélanger le tableau avec n'importe quelle technique côté serveur. Si vous obtenez les images à partir d'une base de données, vous pouvez utiliser la randomisation ou si vous utilisez PHP, vous pouvez utiliser shuffle(). Ensuite, il vous suffit de prendre les trois premières images.

EDIT: Comme vous semble utiliser PHP sur cette page, procédez comme suit:

$images = array('01','02','03','04','05', ...): // the numbers of the images 
shuffle($images): 

for($i=0;$i<3;$i++){ 
    echo "image[".$i."] = 'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus".$images[$i]."_small.png'; 
} 

Insérer que dans la balise script pour imprimer seulement trois lignes de javascript pour le tableau.

Answer 3

Une façon simple est d'enlever les images cueillies du tableau:

for (var i = 0; i < 3; i++) { 
    var index = Math.floor(image.length * Math.random()); 
    var picked = image.splice(index, 1)[0]; 
    document.write(
    '<a href="' + link[1] + '" mce_href="' + link[1] + '">' + 
    '<img src="' + picked + '" mce_src="' + picked + '" border="0" + width="200" />' + 
    '</a>' 
); 
} 

Notez que je corrige le calcul de l'indice aléatoire. L'orignal n'a jamais choisi le premier élément du tableau.

Answer 4

J'irais avec Guffa's answer. Et je voudrais créer le tableau comme ceci:

var images = []; 
for(var i = 0; i < 28 ; i++){ 
    images[i] = 
    'http://www.ovlu.li/ornitholog/cms/images/gallery/schwalbenhaus/schwalbenhaus' 
     + (i < 10 ? '0' : '') 
     + '_small.png'; 
}