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

Question

I am using following code to change image and link every 5 seconds but the second image https://img2.png stays for 10 seconds - what am I missing?

<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

Let's go through the logic:

var i = 0;

The counter i is set to 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++;
}

if links.length == i , set i = 0 . links.length in this case is 2 , so the condition fails.

This means the following case is now executed:

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

Hence i is now 1. The setInterval function now waits 5 seconds.

This is repeated and then i is set to 2 . The setInterval function now waits 5 seconds.

We then go into the third iteration. In this iteration, links.length == i is TRUE and i is set to 0 . However, nothing else happens (the if statement does not change the picture in this iteration) and therefore the setInterval function waits 5 seconds before continuing the loop. That's where your extra 5 seconds come from. The picture is not changed in the third loop, but the setInterval function does wait for 5 seconds.

If you simply want to run this code forever and change the picture every 5 seconds, this is how you could do it:

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