Question

我是JS的初学者，我无法弄清楚尝试幻灯片显示出了什么问题。我知道这似乎是重复的，而且我找到了一种不同的工作方式来用JS显示幻灯片，但是我对自己的代码出了什么问题感到困惑。我见过的每一个幻灯片代码版本都将所有图像URL设置为HTML，然后将其隐藏，并仅使用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（立即调用的函数表达式）定义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>

Answer 2

尝试移动循环的数组 OUTSIDE ：

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

这是另一种可能性（警告：我实际上没有尝试过）：

How do I add a delay in a JavaScript loop?

<img id="sideimg" src="images/image1.jpg" alt="penguin" />
<script type="text/javascript">
    var slides=["images/image1.jpg","images/image2.jpg","images/image3.jpg"]
    var slide=document.getElementById("sideimg");
    var i = 0;
    var loop = function () {
      sideimg.src=slides[i];    // Display current image
      i++;
      if (i >= slides.length)
        i = 0;
      setTimeout(function () {  //  call setTimeout when the loop is called
         loop();                //  ..  again which will trigger another 
      }, 1000)
    };
};
</script>
 };

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

2 个答案: