无法修改成for循环来轮播

Question

写了一个轮播，测试通过，有点丑。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)改写成数组形式也通过了。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];    imgsIndex++;}setInterval(autoPlay,1000)我的想法：改写成for循环的轮播，每次循环的时候，sleep 一秒，搜索了一下资料，发现js的sleep功能不太好实现。请问，可否修改成for循环的轮播。

Answer 1

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