Question

我需要这样做，以便不需要用户输入，因此不需要按钮。一旦程序加载，它应该开始重复/运行。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      var lights=["redlight.jpg","redamberlight.jpg","amberlight.jpg","greenlight.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="banner1.jpg" name="banner" 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 1

setInterval应该完成这项工作，它将以毫秒的间隔运行你的函数

setInterval(LightCycle, 3000);

来源： https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

Answer 2

您只需要设置onload功能。

window.onload = LightCycle;

这将启动加载窗口时运行的LightCycle()函数。

你也可以使用html属性onload，它将在其中运行javascript。

<body onload="LightCycle()"> </body>

完成您的完整示例：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
  var lights=["redlight.jpg","redamberlight.jpg","amberlight.jpg","greenlight.png"]
  var lightscentre= 0
  var timer
  function LightCycle
  {
    if(++lightscentre==30)
      lightscentre=0

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

    timer = setTimeout("LightCycle()",1000)
  }

  window.onload = LightCycle;
  </script>
</head>
<body>
  <img src="banner1.jpg" name="banner" width=130 height=175>
</body>

Answer 3

你没有调用它。要调用它，请使用：

window.onload = LightCycle;

只有这样它才会启动计时器。你忘了添加它！ :(

Answer 4

在jQuery中你可以这样做：

$(document).ready(function(){LightCycle()});

然后当网站加载时，它将调用LightCycle功能。或者你用html制作：

<body onLoad="LightCycle()"></body>

Answer 5

您必须在加载窗口时激活该功能 - 因此不需要用户操作。

因为你可以使用jquery：

＆＃13;

$(function(){ //this will be executed when the window is fully loaded
   LightCycle();
})

＆＃13;

Answer 6

您的脚本中有一堆语法错误。但是，我已将其编辑为运行：

＆＃13;

var lights = [
  "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Bogensch%C3%BCtzen_in_Ili-Mano_2.jpg/800px-Bogensch%C3%BCtzen_in_Ili-Mano_2.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/3/3e/Archery_competition.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/3D_game_hunting_0001.jpg/320px-3D_game_hunting_0001.jpg"]

var lightscentre = 0
var timer

function LightCycle() {
  
  if (++lightscentre == 3) {
    
    lightscentre = 0
  
  }

  document.images.banner.src = lights[lightscentre]

  timer = setTimeout("LightCycle()", 1000)
    
}

function stopCycle() {
  
  clearTimeout(timer)
  
}

＆＃13;

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Archery_target.jpg/320px-Archery_target.jpg" name="banner" width=130 height=175>

<form>
 <input type="button" value="Cycle" name="Cycle" onclick="LightCycle()">
 <input type="button" value="Stop" name="Stop" onclick="stopCycle()">
</form>

＆＃13;

现在，为了在不使用按钮的情况下工作，您只需在脚本中调用该函数即可。看看这个片段：

＆＃13;

var lights = [
  "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Bogensch%C3%BCtzen_in_Ili-Mano_2.jpg/800px-Bogensch%C3%BCtzen_in_Ili-Mano_2.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/3/3e/Archery_competition.jpg",
  "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/3D_game_hunting_0001.jpg/320px-3D_game_hunting_0001.jpg"]

var lightscentre = 0
var timer

function LightCycle() {
  
  if (++lightscentre == 3) {
    
    lightscentre = 0
  
  }

  document.images.banner.src = lights[lightscentre]

  timer = setTimeout("LightCycle()", 1000)
    
}

function stopCycle() {
  
  clearTimeout(timer)
  
}

//ADDED LINES!!!
LightCycle();

＆＃13;

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Archery_target.jpg/320px-Archery_target.jpg" name="banner" width=130 height=175>

<form>
 <input type="button" value="Stop" name="Stop" onclick="stopCycle()">
</form>

＆＃13;

提到两行：

//ADDED LINES!!!
LightCycle();

但是，在您给定的HTML中，它看起来像这样：

<script type="text/javascript">
var lights=["redlight.jpg","redamberlight.jpg","amberlight.jpg","greenlight.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)
}

//ADDED LINES!!!
LightCycle();
</script>

Answer 7

有一些问题......

“LightCycle”功能缺少（）列表在第一个元素之前增加了我认为使用getElementById比document.images更好...
图像元素缺少ID字段可以从body onload简单地调用该函数，而无需添加jquery。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    var lights=["1.jpg","2.jpg","3.jpg","4.jpg"]
    var lightscentre=0;
    var timer;

    function LightCycle() {
        if(lightscentre==4) lightscentre=0

      document.getElementById('banner').src = lights[lightscentre];
        lightscentre++

      timer = setTimeout("LightCycle()",1000)
    }

    function stopCycle()
    {
     clearTimeout(timer)
    }

    LightCycle();
</script>
</head>
<body onLoad="LightCycle()">
<img src="1.jpg" name="banner" id="banner" 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>

Answer 8

试试这个

＆＃13;

var lights=["redlight.jpg","redamberlight.jpg","amberlight.jpg","greenlight.png"];
var lightscentre= 0;
var timer;

function LightCycle(){
  
  if(++lightscentre==4){
    lightscentre=0;
  }
  document.getElementById('banner').src = lights[lightscentre];
  timer = setTimeout(LightCycle,1000);
}

window.onload = LightCycle();

＆＃13;

在html中添加ID属性。

＆＃13;

<img src="banner1.jpg" name="banner" id="banner" width=130 height=175>

＆＃13;

Answer 9

在这种情况下，右边会使用“setInterval”。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        var lights = ["redlight.jpg", "redamberlight.jpg", "amberlight.jpg", "greenlight.png"],
            index = 0,
            timerID;

        function loadLight() {
            if (index == lights.length) {
                index = 0;
            }

            var banner = document.getElementById("bannerEl");
            if (banner) {
                banner.src = lights[index];
                banner.alt = lights[index];
            }

            index++;
        }

        function startCycle() {
            timerID = setInterval(loadLight, 1000);
        }

        function stopCycle() {
            clearInterval(timerID);
        }
    </script>
</head>
<body onload="startCycle();">
    <form id="form1">
        <img src="banner1.jpg" id="bannerEl" width="130" height="175" alt="" />
        <input type="button" value="Cycle" name="Start" onclick="startCycle()" />
        <input type="button" value="Stop" name="Stop" onclick="stopCycle()" />
    </form>
</body>
</html>

Answer 10

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
<img id="img" src="Chrysanthemum.jpg" name="banner" width=130 height=175>

<script type="text/javascript">
    var lights=["Chrysanthemum.jpg","Desert.jpg","Hydrangeas.jpg"];
    var lightscentre= 0;
    function LightCycle()
    {
        if(++lightscentre==3)
        lightscentre=0;
        document.getElementById('img').src=lights[lightscentre];

    }
    setInterval(function(){
    LightCycle();
    },2000);
</script>
</body>

</html>

它会工作..！如果你想停止，那么使用相同的approch [添加计时器变量]

如何连续进行此循环？

10 个答案: