带有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。

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

这是一个工作代码(样式也根据 usual guidelines 固定):

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