每 5 秒更改一次图像和链接

Question

我正在使用以下代码每 5 秒更改一次图像和链接，但第二张图像https://img2.png停留 10 秒 - 我错过了什么？

<script>
    var links = ["https://website1.com","https://website2.com"];
    var images = ["https://img1.jpg","https://img2.png"];
    var i = 0;
    var renew = setInterval(function(){
        if(links.length == i){
            i = 0;
        }
        else {
        document.getElementById("bannerImage").src = images[i], style="width:100%; height: auto;"; 
        document.getElementById("bannerLink").href = links[i], target="_blank"; 
        i++;

    }
    },5000);
    </script>



<a id="bannerLink" target="_blank" href="https://website1.com" onclick="void window.open(this.href); 
return false;">
<img id="bannerImage" style="width:100%; height: auto;" src="https://img1.jpg">

Answer 1

让我们来看看逻辑：

var i = 0;

计数器i设置为0

if(links.length == i){
    i = 0;
} else {
    document.getElementById("bannerImage").src = images[i], style="width:100%; height: auto;"; 
    document.getElementById("bannerLink").href = links[i], target="_blank"; 
    i++;
}

如果links.length == i ，则设置i = 0 。 本例中的links.length为2 ，因此条件失败。

这意味着现在执行以下案例：

document.getElementById("bannerImage").src = images[i], style="width:100%; height: auto;"; 
document.getElementById("bannerLink").href = links[i], target="_blank"; 
i++;

因此i现在是 1。 setInterval函数现在等待 5 秒。

重复此操作，然后将i设置为2 。 setInterval函数现在等待 5 秒。

然后我们进入第三次迭代。 在此迭代中， links.length == i为TRUE并且i设置为0 。 但是，没有其他任何事情发生（if 语句不会更改此迭代中的图片），因此setInterval函数在继续循环之前等待 5 秒。 这就是你额外 5 秒的来源。 在第三次循环中图片没有改变，但是setInterval函数确实等待了 5 秒。

如果您只想永远运行此代码并每 5 秒更改一次图片，您可以这样做：

setInterval(function(){

    // Always change the picture first 
    document.getElementById("bannerImage").src = images[i], style="width:100%; height: auto;"; 
    document.getElementById("bannerLink").href = links[i], target="_blank";

    // Always increment the counter
    i++;

    // Reset counter if equal to length of array
    if (i == links.length){
        i = 0;
    }
},5000);