javascript - 带有innerHtml循环的Javascript幻灯片不起作用

Question

我正在尝试编写一个javascript代码，该代码将循环遍历数组元素列表并使用innerHtml在div内循环写入。我正在寻找一个纯 javascript 解决方案，没有 JQuery。我，卡住了。

这是我的相关代码和这个 jsFiddle：http: //jsfiddle.net/j3XD5/

<div id="slideshow">&nbsp;</div>

-

var url=new Array('im01.jpg', 'im02.jpg', 'im03.jpg', 'im04.jpg');
    var pause=2000;
    var p=0;
    function sl()
    {
    if (p<=url.length-1)
        {
        document.getElementById('slideshow').innerHtml = '<img name="pic" src='+url[p]+' border=0>';
        p++;
        var t=setTimeout(sl(),pause);
        }
        else
        {
        p=0;sl()
        }

    }

    window.onload=sl();

Answer 1

您正在调用该sl函数，而不是将其作为值传递。

改变

var t=setTimeout(sl(),pause);

至

var t=setTimeout(sl,pause);

和

window.onload=sl();

至

window.onload=sl;

由于 JavaScript 区分大小写，因此您还必须更改innerHtml为innerHTML.

%您还可以通过使用而不是测试来使整个过程变得更简单。

这是一个工作代码（也根据通常的准则固定样式）：

var pause=1000, p=0;
window.onload = function sl(){
    document.getElementById('slideshow').innerHTML = '<img name="pic" src="'+url[p]+'" border=0>';
    p = (p+1)%url.length;
    setTimeout(sl, pause);
};

Demonstration