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

Posted 2023-05-07

【中文标题】带有innerHtml循环的Javascript幻灯片不起作用

【英文标题】：Javascript slideshow with innerHtml loop not working

【发布时间】：2013-06-03 16:49:06

【问题描述】：

我正在尝试编写一个 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();

【参考方案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

【讨论】：

非常感谢dystroy。这就是我一直在寻找的。干杯！