Question

编辑：这是另一个问题：我无法使用for循环定义每张图片的Z-index。

function placeImage(x) {
    var div = document.getElementById("div_picture_right");

    div.innerHTML = ""; // clear images

    for (counter = 1; counter <= x; counter++ ) {
        var image = document.createElement("img");
        image.src = "borboleta/Borboleta" + counter + ".png";
        image.width = "195";
        image.height = "390";
        image.alt = "borboleta" + counter;
        image.id = "imagem" + counter;
        image.position = "relative";
        image.style.zIndex = counter;
        div.appendChild(image);
    }
};

window.onload = function () {
    placeImage(20);
};

<body>
    <div id="div_wrapper">
        <div id="div_header">
            <h1>First Project</h1>
        </div>
        <div id="div_picture">
            <div id="div_picture_left"></div>
            <div id="div_picture_right"></div>
        </div>
    </div>
</body>

检查FireBug时，我明白了这一点：

错误：图像损坏或截断

Answer 1

在页面上存在div之前，您的代码似乎正在执行。在完全加载之前，您不应尝试获取DOM中元素的句柄。您可以在window.onload之外定义自己的功能，但请在window.onload内保持通话，例如：

function placeImage(x)
{
    var div = document.getElementById("div_picture_right");

    div.innerHTML = ""; // clear images

    for (counter=1;counter<=x;counter++) {
        var imagem=document.createElement("img");
        imagem.src="borboleta/Borboleta"+counter+".png";
        div.appendChild(imagem);
    }
}

window.onload = function() {
    placeImage(48);
};

我还添加了一个小改进，即获取div上的句柄并将其存储在变量中一次，而不是在每次迭代时获得新句柄。

Answer 2

试试这个：

var placeImage = function(x) {
var img="";
for (var counter = 1; counter <= x; counter++ ) {
     img += '<img src="borboleta\Borboleta'+counter+'.png" alt="" />';
}
    document.getElementById("div_picture_right").innerHTML = img;
};

placeImage(48);

使用此代码，只有1个DOM操作而不是48个。还要确保你有一个具有所述ID的元素（div_picture_right）。

Answer 3

如果要动态更改div的z-index，请将其position属性设置为“absolute”而不是“relative”。这种方式更有意义。

使用JavaScript一次将多个图像放在HTML中

3 个答案: