图像轮播无法升级（HTML / JavaScript）

Question

I am attempting to have the carousel start immediately upon visiting the page and cycle through a series of images every 2.5 seconds, however it will not advance past the first image. I've looked around here and w3schools but haven't been able to locate where my issue is. Any help would be greatly appreciated!

JavaScript is as follows:

window.onload slideShow();
var i=0;

function slideShow()    {
    window.setInterval("nextSlide()", 2500);
}

function nextSlide()    {
    var images["images/stockton0.jpg",
        "images/stockton1.jpg"
        "images/stockton2.jpg"
        "images/stockton3.jpg"
        "images/stockton4.jpg"
        "images/stockton5.jpg"
        "images/stockton6.jpg"
        "images/stockton7.jpg"
        "images/stockton8.jpg"
        "images/stockton9.jpg"
        "images/stockton10.jpg"]
    var photo = document.getElementByClass("stocktonPics");
    photo.src = images[i];
    i++;
}

HTML code:

<img class="stocktonPics" src="images/stockton0.jpg" alt="slides">

Answer 1

A good tip is to check the console for errors.

There's nothing wrong with the flow of your code, besides some tips on making it more maintainable, readable, or semantically correct.

You simply forgot an = in window.onload = slideShow;

And document.getElementByClass doesn't exist. You need to use document.getElementsByClassName(...) to get an array of elements with that class , and finally get its first item with [0] like so:

var photo = document.getElementsByClassName("stocktonPics")[0];

Note that slideShow no longer has the () to call it, when window.onload is assigned to it. This is because you're assigning window.onload to the slideShow function, not the result of calling slideShow() , which in this case is undefined , as nothing is returned.

Your image array should be assigned in this way: var images = [ a, b, c ]

The other thing you should do is keep the array of images outside the scope of the function, so you can use it more easily and change it, rather than creating one (if you don't count optimizations) ever time the function is called. And lastly, window.setInterval( a, b ) can take either a string that will be eval() ed (or equivalent to it), which is what you did, or a function itself. In your case, what you want is simply the function: window.setInterval( nextSlide, 2500 ) .

Here's the final full code:

var i=0;
var images=[
      "images/stockton0.jpg",
      "images/stockton1.jpg",
      "images/stockton2.jpg",
      "images/stockton3.jpg",
      "images/stockton4.jpg",
      "images/stockton5.jpg",
      "images/stockton6.jpg",
      "images/stockton7.jpg",
      "images/stockton8.jpg",
      "images/stockton9.jpg",
      "images/stockton10.jpg" ];

function slideShow() {
    window.setInterval( nextSlide, 2500);
}

function nextSlide() {
    var photo = document.getElementsByClassName("stocktonPics")[0];
    photo.src = images[i];
    i++;
}

window.onload = slideShow;

Answer 2

getElementsByClass method is will get a like array elements object,

so, you should use [0] to get the first element object and set src attr.

var pics = document.getElementsByClassName("stocktonPics")

It's a like array elements object

var firstPic = document.getElementsByClassName("stocktonPics")[0]

It's a element object

 let i = 0; const images = ["images/stockton0.jpg", "images/stockton1.jpg", "images/stockton2.jpg", "images/stockton3.jpg", "images/stockton4.jpg", "images/stockton5.jpg", "images/stockton6.jpg", "images/stockton7.jpg", "images/stockton8.jpg", "images/stockton9.jpg", "images/stockton10.jpg"]; const stockton = document.getElementsByClassName("example")[0]; const slideShow = () => { window.setInterval(nextSlide, 2500); } const nextSlide = () => { stockton.src = images[i]; if(i >= images.length - 1) { i = 0; } else { i++; } console.log(i, stockton) } slideShow() 

 <img class="example">