HTML [JAVASCRIPT]中的图像在几秒钟后更改

-1

此代码我在某种程度上有效;它会改变，但速度很快，我希望在3秒左右后改变，但我无法找到如何改变。提前致谢！HTML [JAVASCRIPT]中的图像在几秒钟后更改

CODE：

<img id = "theImage" src="red.jpg" alt="HTML5 Icon" style="width:250px;height:500px;" align = left> 

<script> 
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"]; 
var place = 0; 

setInterval(change_light,1); 
function change_light() { 
    place += 1; 
    if (place > sequence.length -1) { 
    place = 0; 
    } 
    document.getElementById('theImage').src = sequence[place]; 
}

来源

2017-02-25 AntsOfTheSky

如果您决定出现问题，请标记正确答案 – Antonio

你应该setInterval的时期使用毫秒。试试这个请。我也简化了你的条件：

var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"]; 
var place = 0; 
var frameInterval = 1000; // milliseconds 

setInterval(change_light, frameInterval); 
function change_light() { 
    place++; 
    place = place % sequence.length; 
    document.getElementById('theImage').src = sequence[place]; 
}

来源

2017-02-25 19:05:52 Antonio

非常感谢！总是希望提高:) – AntsOfTheSky

我可以问一下“place = place％sequence.length”的函数可以定义为什么？我假设它会和以前一样，只是没有if？出于某种原因，这使我有点困惑......你能否定义它的用途？我希望能够彻底明白:) – AntsOfTheSky

当然！它是一个余数运算符，当一个操作数除以第二个操作数时，该运算符返回余下的余数。更多关于它你可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder – Antonio

的setInterval希望你通过毫秒（未秒）

使用像这样的数字：setInterval(change_light,3000);

来源

2017-02-25 19:05:11 mehulmpt

谢谢！ ----- – AntsOfTheSky

这很简单，你什么都做对了！只是一个微小的变化：函数setInterval（change_light，3000）;应该接收它的时间以毫秒为单位，而不是以秒为单位。

，也是我想建议增加一些返回值给setInterval，那么你就可以，如果想用清除此计时器：

clearInterval(change_light_id);

，这里是你的固定码：

<img id = "theImage" src="red.jpg" alt="HTML5 Icon" style="width:250px;height:500px;" align = left> 

<script> 
var sequence = ["red.jpg", "red&amber.jpg", "green.jpg", "amber.jpg"]; 
var place = 0; 

change_light_id = setInterval(change_light,3000); 

function change_light() { 
    console.log(1); 
    place += 1; 
    if (place > sequence.length -1) { 
    place = 0; 
    } 
    document.getElementById('theImage').src = sequence[place]; 
} 
</script>

来源

2017-02-25 19:10:35

非常感谢你！ – AntsOfTheSky

HTML [JAVASCRIPT]中的图像在几秒钟后更改

回答

相关问题