时间戳

首页 > 解决方案 > 自动更改图像特定时间段

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>

标签： javascript

解决方案

setInterval()接受将要执行的函数。您必须在内部定义一个函数setInterval而不是调用它。

您可以通过两种方式修复它，而无需更改代码结构。

  1. 您可以使用bind属性使 i 在_SlidePic函数内部可访问。

  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.bind(this, i), 1000);
      
    }
}
<body>
  <div id="one">one</div>
  <img src="" id="photo2">
</body>

  1. 您可以在内部定义函数setInterval并在该函数内部调用SlidePic，如下所示...

  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(function(){
          _SlidePic(i)
        }, 1000);
    }
}
<body>
  <div id="one">one</div>
  <img src="" id="photo2">
</body>

推荐阅读