每 5 秒更改图像和 link

Question

我正在使用以下代码每 5 秒更改一次图像和 link，但第二张图像 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);

每 5 秒更改图像和 link

Change image and link every 5 seconds

javascript

logic

setinterval