Javascript - 슬라이드 쇼가 이동하거나 루프에 들어 가지 않습니다.

Question

W3School을이 슬라이드 쇼에 사용했으며 일부 클래스 이름과 ID 이름을 변경 한 것과 매우 흡사합니다. 그러나 내 슬라이드 쇼는 두 번째 이미지를 지나가 지 않으며 반복되지 않습니다. 이 답변과 유사한 다른 답변 된 질문을 살펴 보았지만 답변을 찾지 못했습니다. 이 자세한 설명을 적어주세요 가능하면

HTML을

<!-- Create: slider --> 
<h1>Noticias Relevantes</h1> 
<div class="slide-container"> 
    <div class="fade"> 
    <div id="num-txt">1/3</div> 
    <img src="img\greenery.jpg"> 
    <div class="text">Nuevo viaje...</div> 
    </div> 
    <div class="fade"> 
    <div id="num-txt">2/3</div> 
    <img src="img\snow.jpg"> 
    <div class="text">Expansion a nuevo paises...</div> 
    </div> 
    <div class="fade"> 
    <div id="num-txt">3/3</div> 
    <img src="img\pink-church.jpg"> 
    <div class="text">Nuevo contrato con iglesia...</div> 
    </div> 
</div> 

<div class="dots"> 
    <span class="dot"></span> 
    <span class="dot"></span> 
    <span class="dot"></span> 
</div> 

<!-- Date --> 
</div> 

<div id="information"> 
    <h1>Informacion Importante</h1> 
    <div id="infoList"> 
    <!-- Create: Drop down list --> 
    </div> 
</div> 
<!--Right menu w/images as links --> 

</body> 

<script src="main.js"></script> 
</html> 

자바 스크립트

// @ts-check 

var slideIndex = 0; 
showSlides(); 

function showSlides() { 
    var i; 
    var slides = document.getElementsByClassName("fade"); 
    var dots = document.getElementsByClassName("dots"); 
    for (i = 0; i < slides.length; i++) { 
    slides[i].style.display = "none"; 
    } 
    slideIndex++; 
    if (slideIndex > slides.length) { 
    slideIndex = 1; 
    } 
    for (i = 0; i < dots.length; i++) { 
    dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex - 1].style.display = "block"; 
    dots[slideIndex - 1].className += " active"; 
    setTimeout(showSlides, 2000); //changes img every. 
} 

, 내 코드가 잘못된 이유를 알고 싶습니다.

감사합니다.

Answer 1

dots을 dot으로 변경하면됩니다. 그러나 우리가 재사용하기 위해 코드를 조금 다시 쓸 수/더 방탄 :

function showSlides(slides, dots) { 
if(slides.length !== dots.length) throw new Error("mismatch of element length"); 
var slideIndex = 0; 

(function next(){ 
    for (i = 0; i < slides.length; i++) { 
    slides[i].style.display = i === slideIndex ? "block" : "none"; 
    if(i === slideIndex){ 
    dots[i].classList.add("active"); 
    }else{ 
    dots[i].classList.remove("active"); 
    } 
    } 
    slideIndex = (slideIndex + 1) % slides.length; 
    setTimeout(next, 2000); 
})() 
} 

가 할 시작하려면 : (아마도)

showSlides(
document.getElementsByClassName("slides"), 
document.getElementsByClassName("dot") 
); 

또는 사용하여 jQuery를 :

showSlides($(".slides"), $(".dot"));