Cannot be modified to for loop for rotation

wrote a round show, passed the test, a little ugly.

function autoPlay(){
    var  myimg = document.getElementById("loopimg");
    if(myimg.src.match("i1.png")){
        myimg.src = "image/i2.png";
    }
    else if(myimg.src.match("i2.png")){
        myimg.src = "i3.jpg";
    }
    else if(myimg.src.match("i3.png")){
        myimg.src = "i4.jpg";
    }
    else if(myimg.src.match("i4.png")){
        myimg.src = "i5.jpg";
    }
    else{
        myimg.src = "image/i1.png";
    }
}

setInterval(autoPlay,1000)

rewritten as an array also passed.

var  imgs = ["image/i1.png","image/i2.png","image/i3.png","image/i4.png","image/i5.png"];
var  imgsIndex = 0;
function autoPlay(){
    if(index == imgs.length-1){
        imgsIndex = 0; 
    }
    var  myimg = document.getElementById("loopimg");
    myimg.src = imgs[imgsIndex];
    imgsIndexPP;
}
setInterval(autoPlay,1000)

my idea: rewrite the broadcast in for loop. During each cycle, sleep for one second,
searched the data and found that the sleep function of js is not easy to implement.


for
Mar.12,2021

var imgs = ["image/i1.png", "image/i2.png", "image/i3.png", "image/i4.png", "image/i5.png"];

function delay(n) {
  return new Promise(resolve => setTimeout(resolve, n))
}

async function autoPlay() {
  for (let img of imgs) {
    var myimg = document.getElementById("loopimg");
    myimg.src = img;
    await delay(1000)
  }
  autoPlay()
}
autoPlay()
Menu