Javascript 滑块不显示

我有下面的滑块，但当我加载页面时，它不会显示第一个图像。我必须点击按钮来加载图像。默认情况下，如何显示第一个图像？以下是我的javascript：

<script>
 var slideIndex = 1;
 showSlides(slideIndex);

 function plusSlides(n) {
 showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}


function showSlides() {
   var i;
   var slides = document.getElementsByClassName("mySlides");
   for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none"; 
   }
   slideIndex++;
   if (slideIndex> slides.length) {slideIndex = 1} 
   slides[slideIndex-1].style.display = "block"; 
   setTimeout(showSlides, 2000); // Change image every 2 seconds
 }
 </script>

你能帮我吗。而且，当我从一张幻灯片转到另一张幻灯片时，它会变得越来越快，我想保持相同的速度吗

---

有人能帮忙吗？谢谢您修改了所有代码，请再次检查：

<script>
var slideIndex = 0;

function plusSlides(n) {
  slideIndex += n;
  showSlides();
}

function currentSlide(n) {
  slideIndex = n;
  showSlides();
}


function showSlides() {
   var slides = document.getElementsByClassName("mySlides");
   for (var i = 0; i < slides.length; i++) {
       slides[i].style.display = "none"; 
   }
   slideIndex++;
   if (slideIndex> slides.length) {slideIndex = 0} 
   slides[slideIndex].style.display = "block"; 
 }

 setTimeout(showSlides, 2000); // Change image every 2 seconds
 </script>

var slideIndex=0；
函数加滑块（n）{
slideIndex+=n；
放映幻灯片（）；
}
功能当前幻灯片（n）{
slideIndex=n；
放映幻灯片（）；
}
函数showSlides（）{
var slides=document.getElementsByClassName（“mySlides”）；
对于（变量i=0；islides.length）{slideIndex=0}
幻灯片[slideIndex].style.display=“block”；
}
设置超时（showSlides，2000）；//每2秒更改一次图像

修改了所有代码，请再次检查：

<script>
var slideIndex = 0;

function plusSlides(n) {
  slideIndex += n;
  showSlides();
}

function currentSlide(n) {
  slideIndex = n;
  showSlides();
}


function showSlides() {
   var slides = document.getElementsByClassName("mySlides");
   for (var i = 0; i < slides.length; i++) {
       slides[i].style.display = "none"; 
   }
   slideIndex++;
   if (slideIndex> slides.length) {slideIndex = 0} 
   slides[slideIndex].style.display = "block"; 
 }

 setTimeout(showSlides, 2000); // Change image every 2 seconds
 </script>

var slideIndex=0；
函数加滑块（n）{
slideIndex+=n；
放映幻灯片（）；
}
功能当前幻灯片（n）{
slideIndex=n；
放映幻灯片（）；
}
函数showSlides（）{
var slides=document.getElementsByClassName（“mySlides”）；
对于（变量i=0；islides.length）{slideIndex=0}
幻灯片[slideIndex].style.display=“block”；
}
设置超时（showSlides，2000）；//每2秒更改一次图像

var slideIndex=0。。。为什么要从1开始幻灯片索引？我两次都试过了，但第一张幻灯片总是不显示。它仅在我单击其中一个点时显示。var slideIndex=0。。。为什么要从1开始幻灯片索引？我两次都试过了，但第一张幻灯片总是不显示。它只在我点击其中一个点时显示。让我修改我的答案，我刚刚注意到你的“showSlides”函数没有收到正确的参数。好的。非常感谢你！Hernandez你能让滑块正常运行吗？我尝试了很多东西，但都没有成功。@Hernandez你好。我想把滑块修好。但是没有成功。它仅在我单击按钮时显示。你能帮我吗？让我修改我的答案，我刚刚注意到你的“showSlides”函数没有收到正确的参数。好的。非常感谢你！Hernandez你能让滑块正常运行吗？我尝试了很多东西，但都没有成功。@Hernandez你好。我想把滑块修好。但是没有成功。它仅在我单击按钮时显示。你能帮我吗？

<script>
var slideIndex = 0;

function plusSlides(n) {
  slideIndex += n;
  showSlides();
}

function currentSlide(n) {
  slideIndex = n;
  showSlides();
}


function showSlides() {
   var slides = document.getElementsByClassName("mySlides");
   for (var i = 0; i < slides.length; i++) {
       slides[i].style.display = "none"; 
   }
   slideIndex++;
   if (slideIndex> slides.length) {slideIndex = 0} 
   slides[slideIndex].style.display = "block"; 
 }

 setTimeout(showSlides, 2000); // Change image every 2 seconds
 </script>