每 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);