javascript - 自动更改图像特定时间段

标签 javascript

我想在每个特定时间段更改数组中的图像。但我的代码不起作用,需要帮助。

<body>
<div id="one">one</div>
<img src="" id="photo2">
<script>
    var one = document.getElementById("one");
    var photo2 = document.getElementById("photo2");

    var links = ["03.gif","04.gif","05.gif","06.gif","07.gif"];
    one.onclick = function(){
        _SlidePic(0);
    };

    function _SlidePic(i){
        if (i < links.length){
            photo2.src = links[i];
            i++;
            id = setInterval(_SlidePic(i),1000);
        }
    }

</script>
</body>

最佳答案

setInterval() 采用如下函数: setInterval(functionName, 1000) 不是这样的:setInterval(functionName(), 1000)。 另外,我将索引变量移出函数以获得更好的性能。 setInterval 调用现在位于 onClick 监听器中,仅被调用一次。你把它放在函数本身中,每次图片改变时它都会调用自己。

var one = document.getElementById("one");
var photo2 = document.getElementById("photo2");

var links = ["03.gif", "04.gif", "05.gif", "06.gif", "07.gif"];
var idx = 0
one.onclick = function() {
  _SlidePic();
  setInterval(_SlidePic, 1000);
};

function _SlidePic() {
  if (idx < links.length) {
    photo2.src = links[idx];
    idx++;
  }
}
<body>
  <div id="one">one</div>
  <img src="" id="photo2">
</body>

关于javascript - 自动更改图像特定时间段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57348578/

相关文章:

javascript - 从 jquery 回调中获取类实例

Javascript 闭包(我认为)

javascript - 将光标保持在文本区域并每次单击添加每个内容

javascript - 更改 axios header 中的 Content-Type 以修复 415 错误

javascript - react 状态没有在 useEffect() 上给出正确的值

javascript - 如何检查对象在knockout js中是否有任何属性

javascript - 检查cookie数组元素是否存在

javascript - 极坐标图、Highcharts 中的类别名称和图表未对齐

javascript - 解码URIComponent不是一个函数

javascript - 如何在不重新加载页面的情况下修改 URL?