这段幻灯片放映代码我做错了什么？

Question

我编写了一个非常简单的幻灯片，每 5 秒显示一张新幻灯片。幻灯片图片名称为：1.png、2.png、3.png等，共有5张幻灯片。当我刷新浏览器时，幻灯片放映不起作用。作为记录，我在 w3schools.com 和其他教程的帮助下编写了这个代码，并且我从网站上直接复制了代码（当然我更改了变量）。即使我这样做了，它仍然不起作用。请帮助。

JS代码(中):

<script type="javascript">
  var number=0;
  function change_slide() {
    number++;
    if(number>5) {
      number=1;
    }
    document.getElementById( "slider" ).style.backgroundImage="url(number + '.png')";    
    setInterval(change_slide, 5000);
  }
</script>

正文标签中：

<body onload="change_slide()">

幻灯片放映div

<div id="slider"></div>

幻灯片放映css

#slider {
  float:left;
  width:505px;
  height:330px;
  margin-right: 50px;
  margin-left: 25px;
  margin-top: 25px;
  border:2px solid black;
  border-radius: 15px;
}

抱歉没有代码片段，但是网站的代码太长了。

PS.all 幻灯片放映图像的尺寸均为：505x330 像素。

Answer 1

问题出在这行：

document.getElementById( "slider" ).style.backgroundImage="url(number + '.png')";

您将 var number 放在双引号内，双引号会将其视为字符串而不是变量。改成这样：

document.getElementById( "slider" ).style.backgroundImage="url(" + number + ".png)";

Answer 2

您可以考虑将函数更改为：

<script>
var number = 0;

function change_slide() {
    number = ++number % 5;
    document.getElementById("slider").style.backgroundImage = ["url('", number, "'.png')"].join("");
    setTimeout(change_slide, 5000);
}

</script>

这条罪魁祸首线应该如 @Matt L 所指出的那样。

这段幻灯片放映代码我做错了什么？

What did I do wrong with this slide show code?

html

javascript

css

slideshow