初始化动态背景

Question

我的代码的作用：

• 保持空白 3 秒
• 显示我的图像列表的索引 1
• 循环遍历列表并在索引 0 处重新开始

---

<div id="background" class="text-center background">

    <script type = "text/javascript">
        var background = document.getElementById("background");
        var currentPos = 0;
        var imagesb = ["/images/indeximg0.jpg", "/images/indeximg11.jpg", "/images/indeximg33.jpg", "/images/indeximg44.jpg", "/images/indeximg55.jpg"], i = 0;

        function changeimage()
        {
            if (++currentPos >= imagesb.length)
                currentPos = 0;

            background.style.backgroundImage = "url(" + imagesb[currentPos] + ")";
        }
        setInterval(changeimage, 3000);
    </script>

</div>

---

我想要它做什么：

• 没有 3 秒的空白背景延迟
• 从索引 0 开始

我尝试了什么：

• 我设置 currentPos = 4

这解决了显示第一张图片但 3 秒延迟仍然存在的问题。我也不喜欢这种方式，因为如果我在列表中添加或删除图像，我将不得不手动更改currentPos

• 我尝试在第一个 div 之前初始化我的背景，以使用以下代码修复 3 秒的背景：

---

<script type = "text/javascript">
    background.style.backgoundImage= "url(/images/indeximg0.jpg)";
</script>

什么都没有改变。仍然有 3 秒的延迟

Answer 1

你应该

1. 在setInterval()和之前调用一次函数
2. 在执行++currentPos 时，您实际上是在递增变量，因此在您第一次设置背景时，值已经是 1。更改它的最简单方法是在您的 if 测试之前设置背景。

var background = document.getElementById("background");
var currentPos = 0;
var imagesb = ["https://via.placeholder.com/100", "https://via.placeholder.com/200", "https://via.placeholder.com/300"];

function changeimage() {

  background.style.backgroundImage = "url(" + imagesb[currentPos] + ")";
  
  if ((++currentPos) >= imagesb.length) {
    currentPos = 0;
  }
}

changeimage();
setInterval(changeimage, 1000);

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.background {
  height: 100%;
  width: 100%;
}

<div id="background" class="text-center background"></div>