javascript - 使用 html CSS 和 javascript 创建轮播的问题

Question

我正在尝试仅使用 HTML、CSS 和 JS 创建轮播。

它有效，但不如我希望的那么好。

当它完成一轮图像时，大约需要 8 秒才能开始显示从第一张图像到最后一张图像，然后再次停止几秒钟，依此类推...

此外，包含背景图片的 div 宽度为 100%，高度为 100vh。我尝试设置背景属性，如 bg-repeat、bg-size、bg-position，但我无法设置让图像在屏幕上很好地显示 - 当设置 background-size: cover 时，它们的图像会被裁剪，如果我设置 background-size: contain; 或另一个属性。

你能检查一下这个“有效”的演示吗？谢谢。

var divi = document.querySelector(".divi");
srcArr = ["https://picsum.photos/id/237/200/300", "https://picsum.photos/id/238/200/300", "https://picsum.photos/id/239/200/300", "https://picsum.photos/id/240/200/300"];
var iter = 0;

setInterval(function() {
  if (iter == (srcArr.length)) {
    iter = 0;
  } else {
    divi.style.backgroundImage = "url('" + srcArr[iter] + "')";
    iter++;
  }
}, 4000);

* {
  padding: 0;
  margin: 0
}

.divi {
  width: 100%;
  height: 100vh;
  background-image: url("https://picsum.photos/id/240/200/300");
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

<div class="divi"></div>

Answer 1

正如 Tyler Roper 所说，当 (iter == srcArr.length) iter 的值变为零但没有更改图像时，因此他们再等 4 秒再等待下一个。

p>

const
  divi   = document.querySelector(".divi"),
  srcArr = ["https://picsum.photos/id/237/200/300", "https://picsum.photos/id/238/200/300", "https://picsum.photos/id/239/200/300", "https://picsum.photos/id/240/200/300"];
var iter = -1;

setInterval(function() {
  iter = (iter + 1) % srcArr.length;
  divi.style.backgroundImage = "url('" + srcArr[iter] + "')";
}, 4000);

* {
  padding: 0;
  margin: 0
}

.divi {
  width: 100%;
  height: 100vh;
  background-image: url("https://picsum.photos/id/240/200/300");
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

<div class="divi"></div>