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

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

转载作者：太空宇宙更新时间：2023-11-03 21:05:57

我编写了一个非常简单的幻灯片放映代码，每 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/

文章推荐： c# - F# 项目自动生成绑定(bind)重定向

文章推荐： python - 尽可能快地找到图中任何可行的流

文章推荐： python - 在 Blender 中使用 OpenCV

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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