在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

我建议使用任何服务器端技术来对阵列进行洗牌。如果从数据库中获取图像，则可以使用它进行随机化，或者如果使用PHP，则可以使用shuffle()。然后你只需要拍摄前三张图片。

编辑：您似乎在该页面上使用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 2

一种简单的方法是从数组中删除拾取的图像：

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 3

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