javascript - 图像轮播不会前进 (HTML/JavaScript)

Question

我试图让轮播在访问页面后立即启动，并每 2.5 秒循环浏览一系列图像，但它不会前进到第一个图像之后。我环顾过这里和 w3schools，但无法找到我的问题所在。任何帮助将不胜感激!

JavaScript 如下:

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 代码:

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

Answer 1

一个好的提示是检查控制台是否有错误。

除了一些使其更易于维护、可读或语义正确的提示之外，您的代码流程没有任何问题。

您只是忘记了 window.onload = slipShow; 中的 =

并且 document.getElementByClass 不存在。您需要使用 document.getElementsByClassName(...) 获取具有该 class 的元素数组，最后使用 [0]< 获取其第一项 像这样:

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

请注意，当将 window.onload 分配给 slideShow 时，它不再有 () 来调用它。这是因为您将 window.onload 分配给 slideShow 函数，而不是调用 slideShow() 的结果，在本例中是未定义，因为没有返回任何内容。

您的图像数组应按以下方式分配:var images = [ a, b, c ]

您应该做的另一件事是将图像数组保留在函数范围之外，这样您就可以更轻松地使用它并更改它，而不是每次调用函数时都创建一个(如果不计算优化)叫做。最后，window.setInterval( a, b ) 可以采用将被 eval() 编辑(或等效于它)的字符串，这就是您所做的，或函数本身。就您而言，您想要的只是函数:window.setInterval(nextSlide, 2500)。

这是最终的完整代码:

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;