图片传送带不会前进（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 = 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() ed（或者等价于它），这就是你所做的或者一个函数本身。在你的情况下，你想要的只是功能：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">