Question

我试图在访问页面时立即启动轮播，并且每2.5秒循环一系列图像，但是它不会超过第一张图像。我在这里和w3schools环顾四周，但无法找到我的问题所在。任何帮助将不胜感激！

JavaScript如下：

Restcomm

HTML code：

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++;
}

Answer 1

一个好的建议是检查控制台是否有错误。

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

您只是忘记了https

中的=

并且window.onload = slideShow;不存在。您需要使用document.getElementByClass获取包含document.getElementsByClassName(...)的元素数组，最后使用class获取第一个项目，如下所示：

[0]

请注意，var photo = document.getElementsByClassName("stocktonPics")[0];分配slideShow时，()不再需要window.onload来呼叫它。这是因为您要将window.onload分配给slideShow函数，而不是调用slideShow()的结果，在这种情况下为undefined，因为没有返回任何内容。

您的图像数组应以这种方式分配：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;

Answer 2

getElementsByClass 方法是得到一个类似数组元素的对象，

所以，您应该使用[0]来获取第一个元素对象并设置src attr。

var pics = document.getElementsByClassName("stocktonPics")

这是一个类似数组元素的对象

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

这是一个元素对象

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

图像旋转木马不会前进（HTML / JavaScript）

2 个答案: