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" />