时间戳

首页 > 解决方案 > 这个幻灯片放映代码我做错了什么？

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

问题描述

我编写了一个非常简单的幻灯片，每 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.所有幻灯片图像的尺寸均为：505x330 像素。

标签： javascripthtmlcssslideshow

解决方案

问题出在这一行：

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

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

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

推荐阅读