Question

我有一个随机图像数组，它在我的网站上显示图像，每个页面刷新时显示不同的图像。它运作得很好，因此：

<script type="text/javascript">
var total_images = 5;
var random_number = Math.floor((Math.random()*total_images));
var random_img = new Array();
random_img[0] = '<img src="img/picture1.png">';
random_img[1] = '<img src="img/picture2.png">';
random_img[2] = '<img src="img/picture3.png">';
document.write(random_img[random_number]);
</script>

我还想做的是，在这个图像数组的正下方，一个标准的HTML段落，会出现一个与显示的图像配对的文本主体。

所以，如果随机图像阵列调出'picture2'，我想在它下面的段落中显示'text2'。 'picture1'会显示'text1'，依此类推。

有人可以帮我这个吗？谢谢。

Answer 1

仅供参考，您的img标签需要关闭，我在下面也进行了更正：

<script type="text/javascript">
   var total_images = 5;
   var random_number = Math.floor((Math.random()*total_images));
   var random_img = new Array();
   var random_text = [];

   random_img[0] = '<img src="img/picture1.png" />';
   random_text[0] = 'text1';
   random_img[1] = '<img src="img/picture2.png" />';
   random_text[1] = 'text2';
   random_img[2] = '<img src="img/picture3.png" />';
   random_text[2] = 'text3';
   document.write(random_img[random_number] + ' <br/><p>' + random_text[random_number] + '</p>');
</script>

Answer 2

您已经得到了答案，但这是另一种使用对象数组存储访问信息的方法：

var arr = [
  { url: 'http://dummyimage.com/10x10/000/fff', text: 'text1' },
  { url: 'http://dummyimage.com/30x30/000/fff', text: 'text2' },
  { url: 'http://dummyimage.com/50x50/000/fff', text: 'text3' }
];

然后，您可以使用arr[index].url和arr[index].text

访问信息

Here is a working example

随机文本与随机图像阵列配对

2 个答案: