使用带有 img URL 的数组的 Javascript 幻灯片

Question

我是 JS 的初学者，我无法弄清楚我尝试的幻灯片有什么问题。我知道这看起来像是重复，并且我找到了一种不同的工作方式，在 JS 中显示幻灯片，但我只是对我的代码出了什么问题感到困惑。我见过的每个版本的幻灯片代码都会在 HTML 中设置所有图像 url，然后隐藏它们并仅使用 JS 显示其中一个，但为什么我的版本不能将图像 url 简单地设置在数组中呢？

<img id="sideimg" src="images/image1.jpg" alt="penguin" />
<script>
next();
var next=function(){

    for(var i=0;i<3;i++){
        var slide=document.getElementById("sideimg");
        var slides=["images/image1.jpg","images/image2.jpg","images/image3.jpg"]
        slide.src=slides[i];
    timeOut();
    if(i>=3){
        i=0;
    };
};
var timeOut=function(){
    setTimeout(next,1000);
}

};
</script>

Answer 1

示例中的函数顺序不正确

您还需要在函数外部定义 i 并且不需要 for 循环

以下内容在 Chrome 中适用于我

<img id="sideimg" src="images/image1.jpg" alt="penguin" />
<script>

var i = 0

var timeOut=function(){
    setTimeout(next,1000);
}

var next=function(){

    var slide=document.getElementById("sideimg");
    var slides=["images/image1.jpg","images/image2.jpg","images/image3.jpg"]
    slide.src=slides[i];
    timeOut();
    i++;
    if(i>=3){
        i=0;
    };
};

next();
</script>

我们还可以使用 IIFE(立即调用函数表达式)在 next 中定义 i，如下所示。最好在每个间隔调用的函数之外声明幻灯片和幻灯片。

<img id="sideimg" src="images/image1.jpg" alt="penguin" />
<script>

var timeOut=function(){
    setTimeout(next,1000);
}

var next=function(){
    var i = 0;
    var slides=["images/image1.jpg","images/image2.jpg","images/image3.jpg"];

    var slide=document.getElementById("sideimg");
return function() {
        slide.src=slides[i];
        timeOut();
        i++;
        if(i>=3){
            i=0;
        };
    };
}();

next();
</script>