显示阵列中的图像

时间:2012-04-12 10:46:23

标签: javascript image

我正在尝试从javascript数组中显示六个图像。运行下面的代码我没有得到任何结果它似乎没有工作。我不知道我的错在哪里。

以下是javascript代码:

var backgroundImage = new Array(); 
backgroundImage[0] = "images/colors-wallpaper.jpg";
backgroundImage[1] = "images/florida-birds.jpg";
backgroundImage[2] = "images/focus-on-life.jpg";
backgroundImage[3] = "images/set-into-life.jpg";
backgroundImage[4] = "images/dandelion.jpg";
backgroundImage[5] = "images/flowers.jpg";
backgroundImage[5] = "images/flowers.jpg";

function displayAllImages() {
// Here has to be some error!!! //
 for (i=0;i<backgroundImage.length;i++) {
    document.write("<li><img src='" + backgroundImage[i] + "' width="160" height="120"/><span>" + backgroundImage[i] + "</span></li>");
}
}

这是我的HTML代码:

<html>
<head>
    <script type="text/javaScript" src="changebackground.js"></script>
</head>
<body>

<div id="container">

    <div class="backgoundImage">
    <ul>
        <script>displayAllImages();</script>
    </ul>
    </div>

</div>

</body>
</html>

4 个答案:

答案 0 :(得分:5)

更改

width="160" height="120"

width='160' height='120'

document.write("<li><img src='" + backgroundImage[i] + "' width="160" height="120"/><span>" + backgroundImage[i] + "</span></li>");

您使用了错误的引号

答案 1 :(得分:2)

你的最后一个数组项密钥应该是6(我也认为它是相同的值,这是一个复制/粘贴错误),我强烈建议不要使用document.write这样的事情。检查链接,看看我认为你想要实现的目标,但是以一种稍微清洁的方式完成(使用jQuery进行演示,仅用于dom就绪处理)

http://jsfiddle.net/UnFUB/

答案 2 :(得分:0)

你需要转义双引号,见下文:

document.write("<li><img src='" + backgroundImage[i] + "' width=\"160\" height=\"120\"/><span>" + backgroundImage[i] + "</span></li>");

答案 3 :(得分:-1)

document.write("<li><img src='" + backgroundImage[i] + "' width='160' height='120'/><span>" + backgroundImage[i] + "</span></li>");

引号中有错误。但最好不要使用document.write 更好的方法是在内存中创建一个元素,然后将其放在这个块中。它在jQuery

上的外观