javascript - JS 创建一个定时器来隐藏图片幻灯片

Question

我正在尝试创建一个图像幻灯片放映，播放所有图像并在最后一个图像上淡出并且在接下来的 10 秒内不再显示任何图像，然后在 10 秒后重新开始。目前我让它停在最后一张图片上，但之后它什么也没做，只是卡住了。不太确定如何完成这样的事情，所以非常感谢任何和所有帮助!以下是 JS，如果需要任何其他脚本，请告诉我!

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
   // var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex >= slides){
        setTimeout(function(){ slideIndex = 1; }, 10000);
    }
    /*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, 10000); // Change image every 10 seconds
}

更新:设置间隔

var slideIndex = 0;
showSlides();

var myPause = setInterval(function(){ showSlides() }, 10000);

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) {
        myPause;
        slideIndex = 1;
    }
    slides[slideIndex-1].style.display = "block";
    setTimeout(showSlides, 10000); // Change image every 10 seconds
    clearInterval(myPause);
}

Answer 1

你真的很接近。只需使用 setInterval 就足够了。

var slideIndex = 0;
showSlides();

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

img { display: block; width: 100% }

<img class="mySlides" src="http://ununsplash.imgix.net/photo-1419064642531-e575728395f2?q=75" />
<img class="mySlides" src="http://ununsplash.imgix.net/photo-1417436026361-a033044d901f?q=75" />
<img class="mySlides" src="http://ununsplash.imgix.net/photo-1414502622871-b90b0bec7b1f?q=75" />