javascript - 如何每 x 秒显示一个新图像？

Question

尝试使用 JavaScript 设置间隔计时器，我不确定如何将图像放入数组中。
我尝试了几种不同的方法，但无法正常工作。

var myImage = document.getElementById("mainImage");

var imageArray = [img class="irc_mi ix3z7xWjrSdc-pQOPx8XEepE" alt="Image result for baseball images" style="margin-top: 70px;" src="http://totalsportscomplex.com/wp-content/uploads/2014/09/baseball-pic.jpg" onload="google.aft&&google.aft(this)" width="626" height="415",
img class="irc_mi ix3z7xWjrSdc-pQOPx8XEepE" alt="Image result for baseball images" style="margin-top: 70px;" src="http://totalsportscomplex.com/wp-content/uploads/2014/09/baseball-pic.jpg" onload="google.aft&&google.aft(this)" width="626" height="415",
img class="irc_mi ix3z7xWjrSdc-pQOPx8XEepE" alt="Image result for baseball images" style="margin-top: 70px;" src="http://totalsportscomplex.com/wp-content/uploads/2014/09/baseball-pic.jpg" onload="google.aft&&google.aft(this)" width="626" height="415"]

var imageIndex = 0;

function changeImage() {
    myImage.setAttribute("src",imageArray[imageIndex]);
  imageIndex++;
  if(imageIndex >= imageArray.length) {
  indexImage = 0;
  }
}

setInterval(changeImage,5000);

在此先感谢，我也是新手，确实尝试寻找答案但找不到。

Answer 1

几件事

1. 您的数组需要是字符串数组:

2. 您将 src 属性设置为包含多个源的整个字符串

3. indexImage 未定义

   var myImage = document.getElementById("mainImage");
   
   var imageArray = [
       "http://totalsportscomplex.com/wp-content/uploads/2014/09/baseball-pic.jpg",
       "http://totalsportscomplex.com/wp-content/uploads/2014/09/baseball-pic.jpg",
       "http://totalsportscomplex.com/wp-content/uploads/2014/09/baseball-pic.jpg"
   ]
   
   var imageIndex = 0;
   
   function changeImage() {
       myImage.setAttribute("src", imageArray[imageIndex]);
       imageIndex++;
       if (imageIndex >= imageArray.length) {
           imageIndex = 0;
       }
   }
   
   setInterval(changeImage, 5000);