Javascript不会加载图片

Question

我想将这些banner.png文件加载到屏幕上，但所有打印出来的都是来自banner数组的实际文本？

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元素，如<img id="myImage" src="" />然后：

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

注意 .-我的回答给出了有关如何更改DOM中存在的IMG元素的来源的指示（建议这样做）。 您不应该document.write()元素，无论是按需还是在页面加载时都不要。 该做法已被弃用，如果您这样做，许多浏览器会删除整个页面的内容。