Question

我对这个幻灯片代码做错了什么？

2018-10-11

67

javascript html css slideshow

我编写了一个非常简单的幻灯片放映程序，每 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 标签中：

<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.所有幻灯片图像的尺寸均为：505x330 像素。

Answer 1

问题出在这行：

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

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

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

Answer 2

您可以考虑将功能更改为：

095848678

该罪魁祸首应如 @matt l 。

trk

2018-10-11