使用随机图像阵列对随机文本

我有一个随机图像阵列，它在我的网站上显示图像，并在每次刷新页面时显示不同的图像。它工作得很好，所以：使用随机图像阵列对随机文本

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

有人能帮助我吗？谢谢。

来源

2014-01-16 Bonfire Dog

我想你错过了你的问题的最后一点。 – Andy

对不起，我准备好之前打'后'。 –

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

来源

2014-01-16 15:31:18

非常感谢！ –

非常感谢！一个快速的附加问题 - 设置文本以适应页面其余部分的文本的最佳方式是什么？（在CSS中完成？）我应该围绕脚本创建一个div并以此方式进行样式设置吗？ –

哦，我明白了 - 我可以在脚本中，在random_text callup之后的'...'之间做到这一点。 –

你已经有了答案，但这里的存储使用对象的数组访问信息的另一种方式：

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。

来源

2014-01-16 15:55:40 Andy

使用随机图像阵列对随机文本

回答

相关问题