如何使用JavaScript自动更改HTML图像

注：我曾经研究过如何改变计时器上的图像，而不是使用按钮，但它不符合我的代码风格

由于我不熟悉HTML和JS，我仍然不了解所有方面，并且对他们在翻译我如何编写代码时所指的部分感到有点困惑

代码：

我需要删除按钮，并有一个定时的基础上，而不是图像的变化。理想情况下每2秒

---

提前感谢。

每隔2秒，您需要使用设置间隔功能更改图像

<img id="image" src="blank_light.jpg" style="width:100px">
<p></p>

<script>

var imageSources = ["red_light.jpg", "red_and_yellow_light.jpg", "yellow_light.jpg", "green_light.jpg"]

var index = 0;
setInterval (function(){
  if (index === imageSources.length) {
    index = 0;
  }
  document.getElementById("image").src = imageSources[index];
  index++;
} , 2000);

</script>

---

CodePen:

这是他在问题中发布的同一个链接，不一样problem@ACOMIT001正如Mattia善意地说的，这是一个不同的问题，因为我发布的链接与我的原始格式不同。如果我不明白它的意思，那么写一堆代码是没有意义的。@asdf_enel_hak非常感谢你们两位。我说我可以移除第一张图片上的图像，而不做任何更改，对吗？任何想法。请随意校对代码，记住我最初复制了你的作品，并将其粘贴到记事本上，看看它是否有效。@freddie.bumder：不明白你的意思。它在工作吗？不，图像停留在空白的红绿灯下。不换其他的。我在哪里换？在原始问题中作为更新？请不要只发布代码答案。详细说明您的代码片段的作用以及它解决问题的原因。

<img id="image" src="blank_light.jpg" style="width:100px">
<p></p>

<script>

var imageSources = ["red_light.jpg", "red_and_yellow_light.jpg", "yellow_light.jpg", "green_light.jpg"]

var index = 0;
setInterval (function(){
  if (index === imageSources.length) {
    index = 0;
  }
  document.getElementById("image").src = imageSources[index];
  index++;
} , 2000);

</script>

/CoffeeScript
$(document).ready ->
  imageSources = ["image1.jpg", "image2.png", "image3.png", "image4.png", "image5.png"]
  index = 0
  setInterval ( ->
    if index == imageSources.length
      index = 0
    $('#image-test').attr('src', imageSources[index]);
    index++
    return
  ), 2000