JavaScript中的While循环

我使用以下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>

---

现在我想更改代码，以便有三个随机图像。我能够做到这一点，只需使用此代码三次。不幸的是，同样的图像有可能被随机选择多次。那么，如何避免多次选择同一个图像呢？我想我必须维护一个选定图像的列表，然后随机选择一个新图像，直到选择了一个不在列表中的图像。但是我如何做到这一点呢？

我建议使用任何服务器端技术来洗牌阵列。如果您从数据库获取图像，您可以使用它的随机性，或者如果您使用PHP，您可以使用。然后你只需要拍摄前三张照片

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

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

我建议使用任何服务器端技术来洗牌数组。如果您从数据库获取图像，您可以使用它的随机性，或者如果您使用PHP，您可以使用。然后你只需要拍摄前三张照片

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

一个简单的方法是从阵列中删除拾取的图像：

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

---

请注意，我更正了随机索引的计算。原始图像从未拾取阵列中的第一项。

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

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

请注意，我更正了随机索引的计算。原始文件从未拾取阵列中的第一项。

我同意。我将创建如下数组：

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

我会和你一起去。我将创建如下数组：

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

---

这不会也会导致重复的图像吗？不会，除非您再次定义图像。请注意，如果没有图像，将不会显示任何内容。这不会导致图像重复吗？不会，除非您再次定义图像。请注意，如果没有图像，将不会显示任何内容。我建议您不要手动定义每个链接，如果它们的基础相同。使用将其添加到中的函数。更快的加载。是的，我想使用中的所有图像，但我还不知道如何做到这一点；我建议你不要手动定义每个链接，如果它们的基础是相同的。使用将其添加到中的函数。更快的加载。是的，我想使用中的所有图像，但我还不知道如何做到这一点；谢谢据我所知，你解析整个目录来获取图像？不过，这在这种情况下是可行的，但我想扩展我的脚本，以便使用目录和下面的所有图像。您不能在javascript中解析目录。我依赖于明显的命名惯例。如果你有，就用它。否则，您必须在服务器上通过PHP或其他方式创建数组，或者在html代码中手动创建数组。谢谢。据我所知，你解析整个目录来获取图像？不过，这在这种情况下是可行的，但我想扩展我的脚本，以便使用目录和下面的所有图像。您不能在javascript中解析目录。我依赖于明显的命名惯例。如果你有，就用它。否则，您将不得不通过PHP或其他方式在服务器上创建数组，或者在html代码中手动创建数组。