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

Trying to do a set Interval timer using JavaScript, I'm not sure how to put images in a array.
I have tried several different ways but can't get it to work.

尝试使用JavaScript设置Interval计时器,我不知道如何将图像放入数组中。我尝试了几种不同的方法,但无法让它发挥作用。

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&amp;&amp;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&amp;&amp;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&amp;&amp;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);

thanks in advance, also I'm new and did try to look for an answer but could not find one.

提前谢谢,我也是新人,并试图寻找答案,但找不到答案。

2 个解决方案

#1

Several things

Your array needs to be an array of strings:

您的数组需要是一个字符串数组:
You're setting the src attribute to an entire string that consists of more than the source

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

indexImage isn't defined

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);

#2

first it's not negative comment but,You just can't throw what ever you want into the array. They can hold strings,numbers,func,obj,...

首先,它不是负面评论,但是,你只是不能把你想要的东西扔进阵列。他们可以持有字符串,数字,函数,对象,......

Since all other variables are same first create a static image as

由于所有其他变量都相同,因此首先创建一个静态图像

<img id="mainImage"  class="irc_mi ix3z7xWjrSdc-pQOPx8XEepE" alt="Image result for baseball images" style="margin-top: 70px;" onload="google.aft&amp;&amp;google.aft(this)" width="626" height="415"/>

modify your array as

将您的数组修改为

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"]

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

#1