这个幻灯片放映代码我做错了什么？答案

【问题标题】：What did I do wrong with this slide show code?这个幻灯片放映代码我做错了什么？
【发布时间】：2018-10-12 02:26:46
【问题描述】：

我编写了一个非常简单的幻灯片，每 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;
}

对不起，没有代码sn-p，但是网站的代码太长了。

PS.所有幻灯片图像的尺寸均为：505x330 像素。

【问题讨论】：

下面的答案会告诉你为什么它不起作用，但是我会添加一个旁注并告诉你你应该打电话给setTimeout而不是setInterval。调用 setInterval 将创建一个循环，在这种情况下，每 5000 毫秒发生一次。然而，在这段代码中，每次函数被调用时，你都会创建那个循环，这将很快导致这个函数每 5000 毫秒被调用几十或几百次。

标签： javascript html css slideshow

【解决方案1】：

问题出在这一行：

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

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

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

【讨论】：

所以我在@82Tuskers 代码中使用了你的代码，效果很好！感谢您的帮助！

【解决方案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指出的。

【讨论】：

所以我将代码更改为您的代码，但仍然没有。我什至尝试制作一个没有 CSS 的新 div，但也没有；/
啊！好的，所以我将“document.getElement”行更改为@Matt L. 提供的行，它工作得很好。感谢您的帮助！
嗨@AdamW。你确定图片在那些网址上吗？