Javascript Html中的幻灯片放映不会自动显示

我为我的网站创建了一个简单的图片幻灯片，但我遇到的问题是，当你第一次访问该网站时，它会显示所有图片，直到你单击其中一个滚动箭头，它才会进入幻灯片。我想它自动只显示一张图片时，你第一次打开网站。以下是我的代码：

<div class="wrapper">
<h2>Gallery</h2>
<img class="mySlides" src="assets/images/chickens1.jpg">
<img class="mySlides" src="assets/images/goat1.jpg">
<img class="mySlides" src="assets/images/goat4.jpg">
<img class="mySlides" src="assets/images/goat2.jpg">
<button class="w3-button w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">&#10095;</button>

画廊
❮
❯

JavaScript:

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

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

var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
如果（n>x.length）{slideIndex=1；}
如果（n<1）{slideIndex=x.length；}
对于（i=0；i

仅从您发布的内容很难判断，但我预期的是，最初，由于CSS样式，所有4个图像都是可见的。然后，当用户与页面交互时，会调用JavaScript，这只会使其中一个可见

---

您可以尝试的一件事是设置它，使它们都设置为

display:none

，然后在页面加载时，调用

showDivs（1）

您的JS是否加载到head中？