Question

我想每3秒更换一次墙纸，但只有第一个有效。我不知道该怎么办:(.。在第一张图片之后，它只是将图片[x]放在其中，而不是其中的值。

<!DOCTYPE html>
<html lang='cs'>
  <head>
    <title>Takumi</title>
    <meta charset='utf-8'>
    <link rel="stylesheet" href="Novy2.css" type="text/css">
  </head>
  <body onload = "startTimer()">
  <script>
  var x;
  x=0;
  function displayNextImage() {
      x = (x === images.length - 1) ? 0 : x + 1;
      document.getElementById("mid").style="background-image : url(images[x])";
  }

  function startTimer() {
      setInterval(displayNextImage, 3000);
  }

  var images = [], x = -1;
  images[0] = image3.jpg;
  images[1] = image2.jpg;
  images[2] = image1.jpg;
  </script>

  <div id="mid" style="background-image : url(image1.jpg)">

  </div>
</html>

Answer 1

将您的startTimer()函数更改为此

function startTimer() {
    setInterval(function() {
       displayNextImage();
    }, 3000);
}

您的图像文件需要加引号

var images = [], x = -1;
images[0] = 'image3.jpg';
images[1] = 'image2.jpg';
images[2] = 'image1.jpg';

，并且您还需要在网址中加上引号，因此它应该看起来像这样。

document.getElementById("mid").style="background-image : url(' + images[x] + ')";

Answer 2

您正在用纯文本“ images [x]”覆盖样式。您将需要停止该字符串并将其链接到所需的图像路径。 'url('+foo[bar]+')'

Answer 3

在创建图像数组时，因为图像文件名是字符串，所以将它们用引号引起来：

  var images = [], x = -1;
  images[0] = 'image3.jpg';
  images[1] = 'image2.jpg';
  images[2] = 'image1.jpg';

然后，您必须连接图像文件名，而不仅仅是打印单词image [x] ..为此：

document.getElementById("mid").style="background-image : url("+ images[x] +")";

Answer 4

更改此行：

document.getElementById("mid").style="background-image : url(images[x])";

对此：

document.getElementById("mid").style="background-image : url('" + images[x] + "')";

此外，更改这些行：

images[0] = image3.jpg;
images[1] = image2.jpg;
images[2] = image1.jpg;

收件人：

images[0] = "image3.jpg";
images[1] = "image2.jpg";
images[2] = "image1.jpg";

第一个变化是，不评估images [x]（因为您将其作为字符串的一部分提供）。现在，在索引“ x”上连接字符串和数组“ images”的实际值。

第二个变化是，您只需要引号即可实际提供字符串值。否则，您将遇到语法错误，即“ image1”未定义。或类似“无法在未定义的属性上获取属性'jpg'”之类的东西。 JS试图评估这些行，这些行应为文字。

随时间更改背景图像

4 个答案: