Javascript - スライドショーは移動もループもしません

Question

私はこのスライドショーにW3Schoolを使用しました。私はいくつかのクラス名とID名を変更したので、とても似ています。しかし、私のスライドショーは2枚目の画像を越えて移動したり、ループに入りません。私はこれに似た他の答えられた質問を見てきましたが、答えは見つかりませんでした。

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> 

Javascriptを

// @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"));