이미지의 회전식 슬라이드 쇼가 진행되지 않음 (HTML/JavaScript)

Question

페이지를 방문하여 즉시 회전식 슬라이드 쇼를 시작하려고 시도하지만 일련의 이미지를 2.5 초마다 순환합니다. 그러나 첫 번째 이미지를 지나서 진행하지는 않습니다. 나는 여기와 w3schools 주위를 둘러 보았지만 나의 문제가 어디에 있는지를 찾을 수 없었다. 어떤 도움이라도 대단히 감사하겠습니다! 다음과 같이

자바 스크립트는 다음과 같습니다

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에 =을 잊어 버렸습니다. slideShow가 더 이상 window.onload이 때, 그것을 호출 할 ()이 없습니다

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

하는 것으로 : 당신은 그 class을 가진 요소의 배열을 얻을 수 document.getElementsByClassName(...)를 사용하고, 마지막과 같이 [0]과의 첫 번째 항목을 얻을 필요 할당 된 이는 slideShow() (이 경우 undefined)을 호출 한 결과가 아닌 slideShow 함수에 window.onload을 할당하기 때문에 아무 것도 반환되지 않기 때문입니다.

이미지 배열은이 방법으로 할당해야합니다

: var images = [ a, b, c ]

당신이해야 할 또 다른 점은 함수의 범위를 벗어나는 이미지의 배열을 유지하는, 그래서 좀 더 쉽게 사용하고, 오히려 변경할 수 있습니다 (최적화를 계산하지 않는다면) 함수가 호출 될 때까지 하나를 생성하는 것보다. 마지막으로 window.setInterval(a, b)은 eval() ed (또는 이와 동등한 문자열), 수행 한 문자열 또는 함수 자체를 취할 수 있습니다. 귀하가 원하는 것은 단순히 기능입니다 : window.setInterval(nextSlide, 2500). 첫 번째 요소 객체와 설정의 src ATTR를 얻을 수 [0]를 사용한다, 그래서

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 방법은 같은 배열 요소는 개체를 얻을 것입니다 :

다음은 마지막 전체 코드입니다.

var pics = document.getElementsByClassName("stocktonPics")

그것은 같은 배열 요소

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

을 개체의 그것은 1 그래서

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