Question

  <!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      var lights=["Images/nt1.jpg","Images/nt2.jpg","Images/nt3.jpg","Images/nt4.png"]
      var lightscentre= 0
      var timer
      function LightCycle
      {
        if(++lightscentre==30)
          lightscentre=0

          document.images.banner.src = lights[lightscentre]

          timer = setTimeout("LightCycle()",1000)
      }
      function stopCycle()
      {
        clearTimeout(timer)
      }
    </script>
  </head>
  <body>
    <img src="nt1.jpg" name="nt1" width=130 height=175>

    <form>
      <input type="button" value="Cycle" name="Cycle" onclick="LightCycle()">
      <input type="button" value="Stop" name="Stop" onclick="stopCycle()">
    </form>
  </body>

</html>

这是我的代码，我无法获取图像只显示按钮，我只能看到一个带黑色十字的盒子，请帮我看看错误，因为我需要的图片才能知道代码作品。背景;这是显示交通灯序列的代码，当窗口打开时应该连续循环。 P.S代码通常看起来不像我粘贴它时发生的那样。

Answer 1

以下是您的代码的整理版本：

var lights = ["Images/nt1.jpg", "Images/nt2.jpg", "Images/nt3.jpg", "Images/nt4.png"]
var lightscentre = 0
var timer

function LightCycle() {
    clearTimeout(timer)
    if (++lightscentre == lights.length)
        lightscentre = 0

    document.images[0].src = lights[lightscentre]

    timer = setTimeout(LightCycle, 1000)
}

function stopCycle() {
    clearTimeout(timer)
}

我改变了什么：

声明函数时，如果没有使用参数，则需要在函数名后面加()。
我在LightCycle开始时清除了所有现有的计时器，因此按两次按钮不会导致循环速度提高两倍。
我更改了选择图片的方法：您的完整代码可能有不同的方法，但据我所知document.images.banner并不意味着什么。
我简化了setTimeout调用：函数名比要评估的字符串更快。

Answer 2

做了一些改变：

1 function LightCycle 
2 {
3     if(++lightscentre==30) {
4       lightscentre=0
5     }
6     document.images[0].src = lights[lightscentre]
7 
8     timer = setTimeout(LightCycle, 1000)
9 }

第1行：使用正确的函数声明
第6行：这适用于文档中的第一张图片。如果有更多图像，则必须动态调整图像索引。
第8行：您可以将LightCycle函数作为参数传递给setTimeout而不引用它。特别是因为LightCycle本身不接受任何论据。

Answer 3

您的代码中存在一些问题，请尝试以下方法：

<!DOCTYPE html>
<html>
    <head>
    <script type="text/javascript">
        var lights = ["Images/nt1.jpg","Images/nt2.jpg","Images/nt3.jpg","Images/nt4.png"];
        var lightscentre= 0
        var timer
        function lightCycle()
        {
            if(++lightscentre==3)
                lightscentre=0;

            document.getElementsByName("nt1")[0].src = lights[lightscentre]

            timer = setTimeout(lightCycle,1000)
        }
        function stopCycle()
        {
            clearTimeout(timer)
        }
    </script>
    </head>
    <body>
        <img src="nt1.jpg" name="nt1" width=130 height=175>
        <form>
        <input type="button" value="Cycle" name="Cycle" onclick="lightCycle()">
        <input type="button" value="Stop" name="Stop" onclick="stopCycle()">
        </form>
    </body>
</html>

Answer 4

工作代码应如下所示

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
    var lights=["Images/nt1.jpg","Images/nt2.jpg","Images/nt3.jpg","Images/nt4.png"]
    var lightscentre= 0;
    var timer;
    function LightCycle()
    {
      if(++lightscentre==4)
        lightscentre=0

      document.getElementById("nt1").setAttribute("src",lights[lightscentre]);
      timer = setTimeout("LightCycle()",1000);
    }
    function stopCycle()
    {
      clearTimeout(timer);
    }
  </script>
</head>
<body>
<img src="nt1.jpg" name="nt1" id="nt1" width=130 height=175>

<form>
  <input type="button" value="Cycle" name="Cycle" onclick="LightCycle()">
  <input type="button" value="Stop" name="Stop" onclick="stopCycle()">
</form>
</body>
</html>

javascript-交通信号灯，我的图片不会在html上显示

4 个答案: