Question

我有这个Javascript代码在页面重新加载时插入随机图像。到目前为止，它有效，但想了解细节。

如何将图像居中？

如何为每个图片插入不同的网页链接？

function random_imglink(){
    var myimages = new Array()
    //specify random images below. You can have as many as you wish
    myimages[1] = "http://example.com/picture.jpg"
    myimages[2] = "http://example.com/image.jpg"
    myimages[3] = "http://example.com/graphic.jpg"

    var ry = Math.floor(Math.random() * myimages.length)
    if (ry == 0)
        ry = 1
    document.write('<img src="' + myimages[ry] + '" border=0>')
}
random_imglink()

Answer 1

首先，请don't use document.write为此，有更好的方法来做到这一点。

这是一种在链接中生成图像标记并将其插入容器的方法：

<强> HTML

<div id="myContainer"></div>

<强> JS

function random_imglink() {
  var list = [
    {img: "http://example.com/1.jpg", link: "http://example.com/1"},
    {img: "http://example.com/2.jpg", link: "http://example.com/2"},
    {img: "http://example.com/3.jpg", link: "http://example.com/3"}
  ];

  var x = Math.floor(Math.random() * list.length),
      a = document.createElement('a'),
      img = document.createElement('img');
  // insert the img into the link
  a.appendChild(img);
  // Set their attributes
  a.href = list[x].link;
  img.src = list[x].img;

  return a;
}

document.getElementById('myContainer').appendChild(random_imglink());

将text-align: center添加到图片容器中，您就完成了：

#myContainer{
  text-align: center;
}

哦，并且在旁注中，您不需要if条件，并且可以在索引0处启动数组。Math.random()返回0（包括）和1之间的数字（除外）。由于您在乘以它后使用Math.floor()，因此结果将始终介于0和数组长度减去1 =＆gt;之间。如果您的数组至少有一个元素，则为有效索引。

如何使用此代码在Javascript中居中和链接每个不同的图像？

1 个答案: