javascript - Javascript图像数组

Question

需要一些帮助。我有两个需要填充图像的 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> 

Answer 1

您的代码需要大修。这是修复后的样子：

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

演示

Answer 2

要将图像设置为元素的背景，您可以使用以下命令：

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> 

Answer 3

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

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

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

<script>random_imglink(myimages);</script> </div>