时间戳

首页 > 解决方案 > 每 5 秒更换一次图片和链接

javascript - 每 5 秒更换一次图片和链接

问题描述

我使用以下代码每 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">

标签： javascriptlogicsetinterval

解决方案

让我们梳理一下逻辑：

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 == iisTRUE并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);

推荐阅读