使用 JavaScript 更改背景图像

Question

我试图在一段时间后自动使用JavaScript更改div的背景图像（但这是我第一次使用JS）。 JavaScript 代码中的任何内容都不起作用； none 的图像出现并且没有任何交换。

    <script type ="text/javascript">
      function displayNextImage() {
          x = (x === images.length - 1) ? 0 : x + 1;
          document.getElementById("img").style.backgroundImage = "url"+(images[x]);
      }
      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          document.getElementById("img").style.backgroundImage = "url"+(images[x]);
      }
      function startTimer() {
          setInterval(displayNextImage, 3000);
      }
      var images = [], x = -1;
      images[0] ='../images/ploutarxos.jpg';
      images[1] ='../images/xatzigiannhs.jpg';
      images[2] ='../images/taylor_swift.jpg';
      images[3] ='../images/selena_gomez.jpg';
      images[4] ='../images/the_weeknd.jpg';
      images[5] ='../images/drake.jpg';
  </script>
    <title>
        Hello world.
    </title>
</head>
<body onload="startTimer()">
    <div id="img" class="swapingImages">
        Oke <br>
        Bla
    </div>

Answer 1

您可以使用名为“UltraPlugin.js”的 javascript 库。将此库导入您的页面，您可以使用命令：css("div_id {your code};"); 为 div

设置 css

Answer 2

我发现的一个错字是下面这行： "url"+(images[x]); 它应该是： "url(" + images[x] + ")";

var images = ['../images/ploutarxos.jpg',
  '../images/xatzigiannhs.jpg',
  '../images/taylor_swift.jpg',
  '../images/selena_gomez.jpg',
  '../images/the_weeknd.jpg',
  '../images/drake.jpg'
];

var img = document.getElementById("img");

function displayImage(x) {
  img.style.backgroundImage = "url(" + images[x] + ")";
  img.innerText = images[x];
}
function startTimer() {
  var x = 0;
  displayImage(x);
  setInterval(function() {
    x = x + 1 >= images.length ? 0 : x + 1;
    displayImage(x);
  }, 3000);
}

swapingImages {
  heigth: 20px;
  width: 20px;
}

<title>
  Hello world.
</title>

<body onload="startTimer()">
  <div id="img" class="swapingImages"></div>
</body>

Answer 3

背景图像 CSS 样式的格式为 url("/path"):

document.getElementById("img").style.backgroundImage = 'url("' + images[x] + '")';

Answer 4

更改此行

document.getElementById("img").style.backgroundImage = "url"+(images[x]);

对此

document.getElementById("img").style.backgroundImage = "url("+images[x]+")";

注意括号的位置。

Answer 5

因为你是新来的，我不会判断代码质量，只会注意到你犯的错误。

您错过了 css 属性 url 处的括号。

替换以下代码：

"url"+(images[x]);

使用以下代码：

"url(" + images[x] + ")";

请注意，我将初始括号移到了 " 引号中，因此它们将被视为实际字符，而不是像您在数学术语中所做的那样，将其视为典型的括号来分隔内部项的优先级。

使用 JavaScript 更改背景图像

Changing background-image with JavaScript

html

javascript

css

background-image