Ротация картинок на JavaScript через z-index

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Документ</title>
  <style>
    html, body {
      height: 100%;
    }
    .box {
      position: absolute;
      width: 600px;
      height: 600px;
      padding: 0;
    }
    .photo {
      width: 600px;
      margin: 0;
    }
  </style>
  <script>
    const rotate = () => {
      const images = document.querySelectorAll('.box');
      let pos = 0;
      setInterval(() => {
        let index = Number.parseInt(images.item(pos).style.zIndex, 10)
        images.item(pos).style.zIndex = index + images.length;
        pos += 1;
        if (pos >= images.length) pos = 0;
      }, 3000);
    }
    window.addEventListener('load', rotate);
  </script>
</head>
<body>
  <div class="box" style="z-index:1">
    <img class="photo" src="https://otvet.imgsmail.ru/download/7dfb2b4f57d07847577c235132f03ff7_i-25.jpg" alt="1">
  </div>
  <div class="box" style="z-index:2">
    <img class="photo" src="https://content-7.foto.my.mail.ru/mail/go-akko/_musicplaylistcover/i-604.jpg" alt="2">
  </div>
  <div class="box" style="z-index:3">
    <img class="photo" src="http://www.smiufa.ru/docs/mail_600x600.jpg" alt="3">
  </div>
  <div class="box" style="z-index:4">
    <img class="photo" src="https://content-11.foto.my.mail.ru/mail/rednack.drugov/_musicplaylistcover/i-7.jpg" alt="4">
  </div>
</body>
</html>