Javascript图像数组

Javascript image array

本文关键字：数组 图像 Javascript      更新时间：2023-09-26

需要一些帮助。我有两个div，我需要用图像填充。图像不能是随机的，因为div 1的图像需要与div 2的图像相对应。我一直在玩，并设法使javascript工作到这一点。问题是，我需要脚本写入div背景，而不是用图像填充div。

<script>
var random = Math.random();
function random_imglink(arr){
var ry = Math.floor(random*arr.length);
document.write(
'<img src="'+arr[ry]+'" border=0 class="two">'
);
}
var myimages = [
"img1.jpg", "img2.jpg","img3.jpg"
 ],
myimagesA = [
"img1b.jpg","img2b.jpg","img3b.jpg"];
</script>
<div><script>random_imglink(myimages);</script> </div>
<DIV><script>random_imglink(myimagesA);</script></div>

您的代码需要进行彻底的修改。这就是修复后的样子：

<div id='a'>A</div>
<div id='b'>B</div>​
<script>
var random = Math.random();
function random_imglink(arr, id){
    var ry = Math.floor(random*arr.length);
    document.getElementById(id).style.backgroundImage = "url('" + arr[ry] + "')";
}
var myimages = [
    "http://img1.jpg.to"],
    myimagesA = ["http://img1b.jpg.to"];

random_imglink(myimages, 'a');
random_imglink(myimages, 'b');
</script>

演示

要将图像设置为元素的背景，可以使用以下方法：

document.getElementById("myDivId").style.backgroundImage = "url(/path/to/img)";

在你的代码中，你可以这样做：

var random = Math.random();
function random_imglink(divId, arr){
    var ry = Math.floor(random*arr.length);
    document.getElementById(divId).style.backgroundImage = "url(" + arr[ry] + ")";
}
var myimages = ["img1.jpg", "img2.jpg","img3.jpg"],
   myimagesA = ["img1b.jpg","img2b.jpg","img3b.jpg"];
random_imglink("firstDiv", myimages);
random_imglink("secondDiv", myimagesA);

html:

<div id="firstDiv"></div>
<div id="secondDiv"></div>

当前代码可能发生的最小更改；使函数编写一个带有样式属性的div标记，而不是图像标记：

document.write('<div style="background:url('+arr[ry]+')">');

将脚本放在您想要的开始标记的位置：

<script>random_imglink(myimages);</script> </div>
相关文章：