Javascript不会加载图片

Question

我想将这些banner.png文件加载到屏幕上，但它打印的只是横幅数组中的实际文本？

function randImg(){
var banner = new Array();

banner[0] = 'banner1.png';
banner[1] = 'banner2.png';
banner[2] = 'banner3.png';
maxImg = banner.length;
randNum = Math.floor(Math.random()*maxImg);
return banner[randNum];
}

有什么想法吗？我想我需要一些如何添加一个src，但我不确定如何。

Answer 1

可能太明显了，但是...

function randImg(){
    var banner = new Array();

    banner[0] = 'banner1.png';
    banner[1] = 'banner2.png';
    banner[2] = 'banner3.png';
    maxImg = banner.length;
    randNum = Math.floor(Math.random()*maxImg);
    return '<img src="' + banner[randNum] + '" />';
}

演示：http://jsfiddle.net/AlienWebguy/u7yfq/

Answer 2

我的纯javascript DOM操作有点模糊(通常使用jquery)，但下面这样的代码应该可以解决这个问题：

<div id="images"></div>    

<script type="text/javascript">
function randImg(){
       var banner = new Array();

       banner[0] = 'banner1.png';
       banner[1] = 'banner2.png';
       banner[2] = 'banner3.png';
       maxImg = banner.length;
       randNum = Math.floor(Math.random()*maxImg);

       var container = document.getElementById('images');

       var img = document.createElement('img');
       img.setAttribute('src',banner[randNum]);

       container.appendChild(img);
    }
</script>

Answer 3

加载图像的指令应该如下所示。

其中imgElement是一个IMG元素。

imgElement.src = randImg();

如果您不知道如何获取IMG元素。给IMG元素一个ID属性，然后像这样加载。

对于作为<img id="myImage" src="" />的IMG元素，则：

var imgElement = document.getElementById("myImage");
imgElement.src = randImg();

备注。-我的回答给出了关于如何更改DOM中存在的IMG元素的源的说明(建议这样做)。无论是在需要时还是在页面加载时，都不应该对元素执行document.write()操作。这种做法已被弃用，如果您这样做，许多浏览器将删除整个页面内容。