初始化动态背景

如何解决初始化动态背景

我的代码的作用：

• 保持空白 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 秒的延迟

解决方法

你应该

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>