Javascript数组未识别被调用的变量 函数幻灯片放映（）{ var pageSplash=document.getElementById（'splash'）； var image=[“pic1.jpg”、“pic2.jpg”、“pic3.jpg”、“pic4.jpg”]； var i=0； while（i image.length）{ i=0； } i+=1； pageSplash.innerHTML=''； setTimeout（'slideShow'，5000）； } }

我不确定为什么我的I变量没有从函数的其余部分被识别为I变量，因此当我尝试运行while循环时，会收到一条错误消息，表明它未定义

setTimeout再次调用该函数，因此每次调用时都将i初始化为0。由于可以使用setTimeout递归调用函数，因此不需要while循环。将i从函数中完全拉出，使其成为全局变量

function slideShow() {
    var pageSplash = document.getElementById('splash');
    var image = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];
    var i = 0;

    while (i <= image.length) {
        if (i > image.length) {
            i = 0;
        }

        i += 1;
        pageSplash.innerHTML = '<img id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + image[i] + '">';
        setTimeout('slideShow', 5000);
    }

}

//我应该是全局的
var i=0；
函数幻灯片（）{
var pageSplash=document.getElementById（'splash'）；
var image=[“pic1.jpg”、“pic2.jpg”、“pic3.jpg”、“pic4.jpg”]；
如果（i>=image.length）{
i=0；
}
i+=1；
pageSplash.innerHTML=''；
//set timeout将再次调用slideShow，因此如果它在函数中，它将递归调用，如果您想在某个点之后停止，则可以在if中嵌套setTimeout
设置超时（幻灯片放映，5000）；
}
//您需要首先调用该函数
幻灯片（）；

我想您需要的是

setInterval

而不是

setTimeout

，并且您希望在更新

innerHTML

后小心地增加

I

//i should be global 
var i = 0;

function slideShow() {
var pageSplash = document.getElementById('splash');
var image = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];

    if (i >= image.length) {
        i = 0;
    }

    i += 1;

    pageSplash.innerHTML = '<img id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + image[i] + '">';

    //set timeout is going to call slideShow again so if it's in the function it will call recursively, if you wanted to stop after a certain point you could nest setTimeout in an if
    setTimeout(slideShow, 5000);
}

//you need to initially call the function
slideShow();

函数幻灯片放映（）{
var pageSplash=document.getElementById（'splash'）；
var image=[“pic1.jpg”、“pic2.jpg”、“pic3.jpg”、“pic4.jpg”]；
var i=0；
setInterval（函数（）{
如果（i==image.length）{
i=0；
}
pageSplash.innerHTML=''；
i++；
}, 5000)
}
幻灯片（）；

您不需要while循环。您不需要重置

i

。您不需要设置

innerHTML

//i should be global 
var i = 0;

function slideShow() {
var pageSplash = document.getElementById('splash');
var image = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];

    if (i >= image.length) {
        i = 0;
    }

    i += 1;

    pageSplash.innerHTML = '<img id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + image[i] + '">';

    //set timeout is going to call slideShow again so if it's in the function it will call recursively, if you wanted to stop after a certain point you could nest setTimeout in an if
    setTimeout(slideShow, 5000);
}

//you need to initially call the function
slideShow();

单击运行代码段。。。看看这是怎么回事。代码下面有更多解释

功能幻灯片（元素、图像、延迟、i）{
elem.src=images[i%images.length]；
setTimeout（函数（）{
幻灯片放映（元素、图像、延迟、i+1）；
}，延误）；
}
//设置幻灯片放映1
幻灯片放映(
document.querySelector（'#slideshow1 img'），//目标元素
[//图像数组
'http://lorempixel.com/100/100/animals/1/',
'http://lorempixel.com/100/100/animals/2/',
'http://lorempixel.com/100/100/animals/3/',
'http://lorempixel.com/100/100/animals/4/',
'http://lorempixel.com/100/100/animals/5/',
'http://lorempixel.com/100/100/animals/6/'
],
1000，//1000毫秒延迟（1秒）
1//从幻灯片索引1开始
);
//设置幻灯片2
幻灯片放映(
document.querySelector（“#slideshow2 img”），//目标元素
[//图像数组
'http://lorempixel.com/100/100/nature/1/',
'http://lorempixel.com/100/100/nature/2/',
'http://lorempixel.com/100/100/nature/3/',
'http://lorempixel.com/100/100/nature/4/',
'http://lorempixel.com/100/100/nature/5/',
'http://lorempixel.com/100/100/nature/6/'
],
500，//500毫秒延迟
1//从幻灯片1开始
);
#幻灯片放映1，#幻灯片放映2{
宽度：150px；
显示：内联块；
}

动物
（1000毫秒延迟）

本性
（500毫秒延迟）

正如其他人所指出的，while循环是不必要的，正如我所指出的，setTimout写得不正确。以下内容大大简化了代码：

function slideShow() {
    var pageSplash = document.getElementById('splash');
    var image = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];
    var i = 0;

    setInterval(function () {
      if (i === image.length) { 
          i = 0;
      }
      pageSplash.innerHTML = '<img id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + image[i] + '">';
      i++;
    }, 5000)
}

slideShow();

var i=0；
函数幻灯片（）{
var pageSplash=document.getElementById（'splash'）；
var imageArray=[“pic1.jpg”、“pic2.jpg”、“pic3.jpg”、“pic4.jpg”]；
if（i

请参阅：获取工作版本。
我无法重现错误。您如何调用该函数？你可以发布一个完整的代码示例来重现这个问题吗？顺便说一句，i>image.length的计算结果永远不会为true，因为while循环只有在调用函数FYI setTimeout时才会运行，因为它的第一个参数不应该用引号引起来（正如你所说的那样）。它应该是延迟后要调用的函数的名称——对函数的引用<代码>设置超时（幻灯片，5000）谢谢这真的很有帮助<代码>i

不必是全局的<当代码>i等于

image.length

时，它将超出范围，直到它大于

image.length

，您的代码才会重置

i

<代码>i不需要重置。不要在

setTimeout

中使用字符串。如果不需要，请不要设置

innerHTML

。谢谢，修复了越界问题。

i

不需要是全局的。你的幻灯片不会循环。它确实会循环。去看看小提琴。我并没有说我“必须”是全球性的，它只是需要有一个比幻灯片更大的范围。我也没有说这是做这项工作的“唯一”方法。在调用slideShow的过程中保持i的活动状态，允许i在slideShow中保持并被检查。否则每次我都重置为0，你就永远无法进入下一张幻灯片。这里的代码不会循环，链接的小提琴也不会工作。正是因为这个原因，您不应该链接到非现场资源。你可以在这里将js/html嵌入到代码片段中，这是有原因的。此外，还有一些方法可以绕过我每次“重置”时不使用全局状态的情况。@naomik The fiddle确实可以工作，但你没有使用我在图像上添加的title元素来检查和LOL你不应该这样做