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指出。

此幻灯片显示代码有什么错？

2 个答案: