Javascript 赢得图像'；除非我点击点，否则不会出现在幻灯片上_Javascript_Html_Css_Slideshow

Javascript 赢得图像'；除非我点击点，否则不会出现在幻灯片上

javascript html css

Javascript 赢得图像'；除非我点击点，否则不会出现在幻灯片上,javascript,html,css,slideshow,Javascript,Html,Css,Slideshow,我正在为我的大学项目制作一个简单的幻灯片，虽然效果很好，但图片一开始不会出现在幻灯片上，只有点和箭头。相反，我必须单击箭头或点，以便它们显示出来。每次我加载页面或刷新页面时都会发生这种情况，我不知道为什么。谁能帮我一下吗。这是我的javascript var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSli

我正在为我的大学项目制作一个简单的幻灯片，虽然效果很好，但图片一开始不会出现在幻灯片上，只有点和箭头。相反，我必须单击箭头或点，以便它们显示出来。每次我加载页面或刷新页面时都会发生这种情况，我不知道为什么。谁能帮我一下吗。这是我的javascript

var slideIndex = 1;
showSlides(slideIndex);

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

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

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("image-container");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  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";
}

和HTML

    <body>   
        <div class="slide-container">
            <div class="image-container">
                <img src="imag1.jpg" style="width:100%">
            </div>
             <div class="image-container">
                <img src="image2.jpg" style="width:100%">
             </div>
            <div class="image-container">
                <img src="image3.jpg" style="width:100%">
            </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>  
        <div style="text-align:center">
            <span class="dot" onclick="currentSlide(1)"></span>
            <span class="dot" onclick="currentSlide(2)"></span>
            <span class="dot" onclick="currentSlide(3)"></span>
    </div> 
    </body>


❮
❯

一切正常，请查看我的live codepen：使用3种不同浏览器在@Alessio codepen上测试一切正常。也许你可以创建自己的代码笔，看看是否可以复制这个问题？一切似乎都很好，请查看我的live CodePen：在@Alessio CodePen上使用3种不同的浏览器进行测试一切似乎都很好。也许您可以创建自己的代码笔，看看是否可以复制该问题？

    <body>   
        <div class="slide-container">
            <div class="image-container">
                <img src="imag1.jpg" style="width:100%">
            </div>
             <div class="image-container">
                <img src="image2.jpg" style="width:100%">
             </div>
            <div class="image-container">
                <img src="image3.jpg" style="width:100%">
            </div>
            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>  
        <div style="text-align:center">
            <span class="dot" onclick="currentSlide(1)"></span>
            <span class="dot" onclick="currentSlide(2)"></span>
            <span class="dot" onclick="currentSlide(3)"></span>
    </div> 
    </body>