Javascript-幻灯片放映不'；不要移动也不要进入一个循环

我在这张幻灯片中使用了W3School，我也使用了非常类似的方式，因为我更改了一些类名和ID名。但是，我的幻灯片不会移过第二个图像，也不会进入循环。我已经看过了其他类似的问题，但没有找到答案

Html

相关通知
1/3
新维亚杰。。。
2/3
扩展一个新派。。。
3/3
新反政府武装。。。
重要信息

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.
}

/@ts检查
var slideIndex=0；
放映幻灯片（）；
函数showSlides（）{
var i；
var slides=document.getElementsByClassName（“淡入淡出”）；
var dots=document.getElementsByClassName（“dots”）；
对于（i=0；i幻灯片长度）{
slideIndex=1；
}
对于（i=0；i

如果可能的话，请给出一个详细的解释，我想知道为什么我的代码是错误的

---

谢谢。

要使其正常工作，只需将

点更改为
点即可。但是，我们可以稍微重写代码，使其可重用/更防弹：

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); 
 })()
}

或者使用jquery（可能）：

你打错了。更改
var dots=document.getElementsByClassName（“dots”）
to
var dots=document.getElementsByClassName（“dot”）将
点
（只有一个）更改为
点
（我们需要的三个），它可以工作；）真不敢相信我居然没看到！我明白为什么对类和id进行不同的命名对于避免“这些”类型的问题很重要。太谢谢你们了，我都快发疯了！
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")
);

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