例如每隔5秒如何更改图像？

Question

我的html代码中有3张图片，我希望它们每5秒更改一次。为什么我的代码不起作用？PS。如果可以帮助，请不要使用jquery，因为我还没有学到。

var images = [];

images[0] = ['photoFromInternet'];
images[1] = ['photoFromInternet2'];
images[2] = ['photoFromInternet3'];
var index = 0;

function change() {
  document.mainPhoto.src = images[index];
  if (index == 2) {
    index = 0;
  } else {
    index++;
  }

  setInterval(change(), 1000);
}

window.onload = change();

<div class="lastMain">
  <a href="www.comingsoon.com" id="slider">
    <img id="mainPhoto">
    <div class="mainSlider">
      <img src="photoFromInternet1" style="display: none">
      <img src="photoFromInternet2*" style="display: none">
      <img src="photoFromInternet3" style="display: none">
    </div>
  </a>
</div>

Answer 1

看看您的控制台，它告诉您原因。 Uncaught TypeError: Cannot set property 'src' of undefined，表示document.mainPhoto未定义。这不是您在JS中选择元素的方式（document.getElementById("mainPhoto")效果更好：）

此外，您应该传递函数到setInterval，而不是直接在函数内部调用该函数，否则您将无限次调用change()，从而导致infinite call stack error。

最后，您每次调用函数时都希望设置一个timeout，而不是一个间隔。超时执行一次。如果您每次都设置一个新的时间间隔，则将以指数方式堆积函数调用，从而使CPU不堪重负，从而使页面无响应。

var images = [];

images[0] = ['photoFromInternet'];
images[1] = ['photoFromInternet2'];
images[2] = ['photoFromInternet3'];
var index = 0;

function change() {
  document.getElementById("mainPhoto").src = images[index];
  if (index == 2) {
    index = 0;
  } else {
    index++;
  }

  setTimeout(change, 1000);
}

window.onload = change();

<div class="lastMain">
  <a href="www.comingsoon.com" id="slider">
    <img id="mainPhoto">
    <div class="mainSlider">
      <img src="photoFromInternet1" style="display: none">
      <img src="photoFromInternet2*" style="display: none">
      <img src="photoFromInternet3" style="display: none">
    </div>
  </a>
</div>