为什么我的图像没有按预期更新？

Question

was trying to follow a guide that seemed to me very straightforward and simple that i found here:试图遵循我在这里找到的在我看来非常简单明了的指南：

Change css background-Image using javascript 使用 javascript 更改 css 背景图像

however in my implementation it doesn't work.但是在我的实现中它不起作用。 the image does not get displayed or changed.图像不会显示或更改。 any hints?任何提示？

EDIT: not the same as suggested duplicate.编辑：与建议的副本不同。 now that parenthesis after changeImage has been removed, the function gets repeated but the problem of not displaying any of the background images persists.现在 changeImage 后的括号已被删除，function 会重复，但不显示任何背景图像的问题仍然存在。

2ND EDIT: i also tried removing the parenthesis after buildImage, with the same result (no background images displayed)第二次编辑：我还尝试在 buildImage 之后删除括号，结果相同（不显示背景图像）

<div id="pupa">

</div>

<script>


  var images = ['file:///Users/karin/PROJECTS/PORTFOLIO/pupal%20stage/img/stage12.jpg',
                'file:///Users/karin/PROJECTS/PORTFOLIO/pupal%20stage/img/stage34.jpg',
                'file:///Users/karin/PROJECTS/PORTFOLIO/pupal%20stage/img/stage56.jpg'];
  var index = 0;

  function buildImage() {
    console.log("setting image");
    document.getElementById('pupa').style.backgroundImage = 'url(' + images[index] + ')';
  }

  function changeImage() {
    index++;
    if (index >= images.length) index = 0;
    console.log("changing image");
    document.getElementById('pupa').style.backgroundImage = 'url(' + images[index] + ')';
  }

  buildImage();

  setInterval(changeImage, 3000);

</script>

Answer 1

This code will work if you add your images in a folder called img in the same folder where the html page is.如果您将图像添加到 html 页面所在的同一文件夹中名为 img 的文件夹中，则此代码将起作用。

<html>
  <head>
    <style>
      #pupa
      {
        width:300px;
        height:300px;
        background-position:center;
        background-repeat:no-repeat;
        background-size:cover;
      }
    </style>
  </head>
  <body>
    <div id="pupa"></div>
    <script>
      var images = ['img/stage12.jpg',
                    'img/stage34.jpg',
                    'img/stage56.jpg'];
      var index = 0;
      document.getElementById('pupa').style.backgroundImage = `url(${images[index]})`;
      setInterval(function(){
        index=(++index >= images.length)?0:index;
        console.log(`changing image of index : ${index}`);
        document.getElementById('pupa').style.backgroundImage = `url(${images[index]})`;
      },3000);
    </script>
  </body>
</html>

This is the same code tweaked a bit, and you don't need another function buildImage() to set image first, it works (make sure to check path of images)这是相同的代码，稍微调整了一下，你不需要另一个 function buildImage() 先设置图像，它可以工作（确保检查图像的路径）

Make sure to change width, height, background-size, image name, path etc according to your need.确保根据需要更改宽度、高度、背景大小、图像名称、路径等。

为什么我的图像没有按预期更新？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-11-25 14:14:37

为什么我的图像没有按预期更新？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-11-25 14:14:37

解决方案1
0 已采纳 2020-11-25 14:14:37