Хотя цикл в JavaScript

Question

У меня есть следующие JavaScript, чтобы получить случайное изображение из списка доступных изображений:

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

Теперь я хотел бы изменить код так, что есть три случайных изображений. Я смог это сделать, просто используя этот код три раза. К сожалению, существует вероятность того, что одни и те же изображения случайным образом выбираются несколько раз. Итак, как я могу избежать того, что одно и то же изображение выбрано несколько раз? Я думаю, что мне нужно сохранить список выбранных изображений, а затем выбрать новое изображение случайным образом, пока не будет выбрано изображение, которого нет в списке. Но как мне это сделать?

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

Я бы рекомендовал перетасовать массив любой техникой на стороне сервера. Если вы получаете изображения из базы данных, вы можете использовать ее рандомизацию, или если вы используете PHP, вы можете использовать shuffle(). Тогда вам просто нужно взять первые три изображения.

EDIT: Как вы, кажется, использует PHP на этой странице, попробуйте следующее:

$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'; 
} 

Вставьте что в тег сценария для печати только три строки JavaScript для массива.

Answer 3

Простой способ заключается в удалении изображений из определена массива:

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>' 
); 
} 

Обратите внимание, что я исправил расчет случайного индекса. Orignal никогда не выбрал первый элемент массива.

Answer 4

Я бы пошел с Guffa's answer. И я бы создал массив следующим образом:

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'; 
}