初始化动态背景

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

你应该

在setInterval()和
执行 ++currentPos 时实际上是在递增变量，因此第一次设置背景时，值已经是 1。最简单的更改方法是在 [=15= 之前设置背景] 测试。

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>

初始化动态背景

initializing a dynamic background

html

bootstrap-4

background

lazy-initialization