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

时间:2014-01-16 15:23:58

标签: javascript arrays text random

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

<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',依此类推。

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

2 个答案:

答案 0 :(得分:0)

仅供参考,您的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>

答案 1 :(得分:0)

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

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].urlarr[index].text

访问信息

Here is a working example