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 
} 

UPDATE：的setInterval

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

正如BillyNate已经说过，setInterval使得它的工作您想要的方式。要以10秒的间隔重复幻灯片放映，您需要隐藏最后一张幻灯片，然后在10秒后通过设置超时重复播放幻灯片。

动画可应用于最后一张幻灯片设置为display: none的位置。

var slides = document.getElementsByClassName("mySlides"); 
 

 
function switchSlides() { 
 
    var slideCount = slides.length; 
 
    var i = 0; 
 
    
 
    // Set first slide visible 
 
    slides[i].style.display = "block"; 
 
    
 
    // Switch slide every 10 seconds 
 
    var switchInterval = setInterval(function() { 
 
    i++; 
 
    if (i < slideCount) { 
 
     slides[i-1].style.display = "none"; 
 
     slides[i].style.display = "block"; 
 
    } else { 
 
     clearInterval(switchInterval); 
 

 
     // Hide last slide (--> fade out image) 
 
     slides[i-1].style.display = "none"; 
 
     
 
     // Wait 10 seconds, then repeat switchSlides 
 
     setTimeout(switchSlides, 10000); 
 
    } 
 
    }, 10000); 
 
} 
 

 
switchSlides();

.mySlides { 
 
    display: none; 
 
}

<img class="mySlides" src="http://unsplash.it/200?image=10"> 
 
<img class="mySlides" src="http://unsplash.it/200?image=20"> 
 
<img class="mySlides" src="http://unsplash.it/200?image=30">

Answer 2

你真的很近。只要使用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"; 
 
    \t 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" />