幻灯片Javascript

Question

嗨我在我的网站上运行了一个幻灯片javascript，但是当我来回更改图像并且自动性没有显示图像时，它似乎无法正常工作。有人可以帮我写一下因为我已经尝试了一个多月而无处可去。 https://wbd-ownwork-13--15nalaas.repl.co/

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

// Next/previous controls
function plusSlides(n) {
 showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
 showSlides(slideIndex = n);
}

function showSlides(n) {
 var i;
 var slides = document.getElementsByClassName("mySlides");
 var dots = document.getElementsByClassName("demo");
 var captionText = document.getElementById("caption");
 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";
 captionText.innerHTML = dots[slideIndex-1].alt;
}

var slideIndex = 0;
showSlides();

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 = 2} 
   slides[slideIndex-2].style.display = "block";
   setTimeout(showSlides, 4000); // Change image every 4 seconds
  }
  </script>

Answer 1

首先，您无需添加自定义控件来更改幻灯片，因为幻灯片放映已经足够了。 其次，您需要将整个脚本更改为给定的脚本，然后它才会起作用，因为脚本的其余部分正在搞乱幻灯片。

将整个脚本从第94行更改为HTML中的第125行 -

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

    function showSlides(){
        var slides = document.querySelectorAll('.mySlides');
        for(var i = 0; i < slides.length; i++){
            slides[i].style.display = "none";
        }
        slides[slideIndex].style.display = "block";
        slideIndex++;
        if(slideIndex > slides.length - 1){slideIndex = 0}
        loop();
    }
    function loop(){
        setTimeout(showSlides, 1000);
    }
</script>

如果您还有问题，请再次询问。