Question

我正在使用javascript来显示图片。我有5张图片但无法显示它们。我的代码如下：

function set()
{
    var i;  
    for(i=1; i<=5; i++)
    {
        var image = "<img src=images/sl + i + />";  
        document.getElementById('slider').innerHTML = image;
    }
}
setInterval("set()","500");


<div id="slider">   
    <img src="images/sl1.jpg" />
</div>

Answer 1

改变 -

var image = "<img src=images/sl + i + />";

到 -

var image = "<img src=images/sl" + i + "/>";

此外，我认为您还需要在此(jpg | png etc)

中添加图片格式

编辑 -

var image = "<img src=images/sl" + i +".jpg"+" style='width:500px;height:300px;' />";

Answer 2

你现在总是把相同的图像放在循环结束之前。我可以提出这个代码：

var i = 0;
function set(){
    var image = "<img src=images/sl" + i + "/>";  
    document.getElementById('slider').innerHTML = image;
    i = (i+1)%5;
}
setInterval(set, 500);

我修复了一些其他错误/问题。永远不要将字符串作为第一个参数传递给setInterval，传递函数的名称或函数表达式。第二个需要的参数是一个数字，传递一个字符串文字是没有意义的。

但是，在代码的HTML部分定义img元素并更改src属性而不是整个幻灯片内部HTML会更简洁。它还会告诉浏览器仅在加载图像后才更改显示。

Answer 3

假设图像的文件名为sl1, sl2,..., sl5，则应为

var image = "<img src=images/sl"+i+"/>";

Answer 4

试试这个：

function set()
{
    var i;  
    for(i=1; i<=5; i++)
    {
        var image = "<img src='images/sl" + i + "'/>";  
        document.getElementById('slider').innerHTML = image;
    }
}
setInterval("set()","500");



<div id="slider">   
    <img src="images/sl1.jpg" />
</div>

Answer 5

您的'i'变量是字符串的一部分，您需要：

var image = "<img src=images/sl" + i + "/>";

无法在javascript中显示图片

5 个答案: