javascript - 无法在 javascript 中显示图像

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，传递函数的名称或函数表达式。第二个需要的参数是一个数字，传递字符串文字没有意义。

但是img在代码的 HTML 部分中定义元素并只更改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 + "/>";