Question

我想在DIV中显示不同的图像，图像的转向取决于随机数。图像名称类似于1.gif，2.gif，.. 6.gif

这样做我编码

var img = document.createElement("IMG");
img.src = "images/1.gif";
document.getElementById('imgDiv').appendChild(img);

但它不会取代旧图像，如何在第一张图像的底部添加另一张图像。

DIV的

语法是：

<div id="imgDiv" style="width:85px; height:100px; margin:0px 10px 10px 375px;"></div>

你可以停下来吗？

Answer 1

var dv = document.getElementById('imgDiv');

// remove all child nodes
while (dv.hasChildNodes()) { 
    dv.removeChild(dv.lastChild); 
} 

var img = document.createElement("IMG"); 
img.src = "images/hangman_0.gif"; 
dv.appendChild(img);

Answer 2

var img = document.createElement("IMG");
img.src = "images/1.gif";
var oldImg = document.getElementById('oldImg');
document.getElementById('imgDiv').replaceChild(img, oldImg);

Answer 3

如果要替换元素，则需要使用replaceChild，而不是appendChild。

Answer 4

我不建议更改有问题元素的src。当浏览器下载下一个图像时，这将导致下一个图像的显示滞后。如果您有一定数量的图像，则需要按照现在的方式预加载它们。

如果您有以下代码：

 <div id="imgDiv" style="width:85px; height:100px; margin:0px 10px 10px 375px;"></div>

你可以这样做：

<script type="text/javascript>
     var nextImage = document.createElement("img");
     nextImage.src = "your source here";

     document.getElementById("imgDiv").appendChild(nextImage);
</script>

现在你有了一个图像，你可以使用replaceChild（）方法：

var imageDiv = document.getElementById("imgDiv");
imageDiv.replaceChild(nextImage, imageDiv.childNodes[0]);

使用JavaScript替换DIV中的图像

4 个答案: