我编写了一个非常简单的幻灯片放映代码，每 5 秒显示一张新幻灯片。幻灯片图片名称为:1.png、2.png、3.png等，共有5张幻灯片。当我刷新浏览器时，幻灯片放映不起作用。作为记录，我在 w3schools.com 和其他教程的帮助下编写了这个代码，并且我从网站上直接复制了代码(当然我更改了变量)。即使我这样做了，它仍然不起作用。请帮忙。
JS 代码(in ):
<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 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 像素。
最佳答案
问题出在这里:
document.getElementById( "slider" ).style.backgroundImage="url(number + '.png')";
您将 var number 放在双引号内，双引号会将其视为字符串而不是变量。将其更改为:
document.getElementById( "slider" ).style.backgroundImage="url(" + number + ".png)";
关于javascript - 这段幻灯片放映代码我做错了什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52764854/