Question

我想要的东西是添加到我的代码中的东西，它将改变我的动画并使一系列光线在没有用户输入的情况下自动继续...

这是我的代码到目前为止，我需要将代码从按钮点击功能更改为自动光源序列。

<h1>Changing HTML images</h1>
<p> Click the button to change the Traffic Lights </p>
<img id="myImage" onclick="changeimage()" src="red.jpg" width="100" height="180"> 

<button type ="button"
onclick="changeimage()">Change the traffic light</button>

<script>
var counter = 0
var image = ["red.jpg","redandorange.jpg","orange.jpg","green.jpg"]

function changeimage () {

    window.alert(counter)
    counter++

    if(counter > 3 ){
        counter = 0
    } 
    document.getElementById('myImage').src=image[counter]
}

</script>
<body>
</body>
</html>

Answer 1

如果您在没有用户输入的情况下询问如何进行函数调用或事件，那么您有什么问题会稍微不确定。

首先，如果您不需要活动并查看您的代码，那么您就不会

在脚本末尾

// intervals create an idel wait loop and give you a handle to it
// first argument function to run on loop fire
// second argument time the idle wait is to wait before firing in milliseconds
var IntervalH = setInterval(changeImage,30*1000)

如果您想清理代码并使其没有冲突，我会将其更改为使用闭包。

(function ImageRotationClosure(){
    var counter = 0
    var secondsWait = 10;
    var image = ["red.jpg","redandorange.jpg","orange.jpg","green.jpg"]

    setInterval(function changeimage() {
        counter++
        if(counter > 3 ){
            counter = 0
        } 
        document.getElementById('myImage').src=image[counter]
    }, secondsWait*1000);
})();

这不仅使您的代码更小，而且使其安全，因为闭包中的var仅用于闭包而不是在全局范围EG窗口中，因为它阻止用户使用浏览器控制台（Firebug， WebKit开发工具）和网址注释EG javascript:images.push("somefile.jpg");搞乱你的滑块就像一个狡猾的插件或用户决定插入浏览器的任何其他内容。

Answer 2

您可以使用setInterval(method, intervalTime)或setTimeout(method, waitTime)。

在您的特定情况下，最简单的方法是使用setInterval。例如：

setInterval(changeimage, 500);

在更复杂的情况下，您想要使用setTimeout并自行重启。这将确保方法的完成与以下执行的开始之间的最短指定时间。例如：< / p>

var next = function() {
  changeimage();
  setTimeout(next, 500);
};
next();

javascript无需输入即可更改动画序列

2 个答案: