Слайд-шоу Javascript, который меняет текст через 0,5 секунды после изменения изображения

Question

Мне нужно сделать HTML-страницу со слайд-шоу. Фотографии из слайд-шоу должны меняться каждые 2 секунды. Через 0,5 секунды после отображения текущего изображения текст должен отображаться над изображением. И это должно быть сделано без использования jQuery или других библиотек, просто функций javascript. Это то, что я имею прямо сейчас, но оно не работает должным образом.

var imageIndex = 0; 
    var textIndex = 0; 
    displayImage(); 
    displayText(); 

    function displayImage() { 
     var i; 
     var x = document.getElementsByClassName("mySlides"); 
     for (i = 0; i < x.length; i++) { 
      x[i].style.display = "none"; 
     } 
     imageIndex++; 
     if (imageIndex > x.length) {imageIndex = 1}  
     x[imageIndex-1].style.display = "block"; 
     setTimeout(displayImage, 2000); // Change image every 2 seconds 
    } 

    function displayText() { 
     var i; 
     var x = document.getElementsByClassName("text"); 
     for (i = 0; i < x.length; i++) { 
      x[i].style.display = "none"; 
     } 
     textIndex++; 
     if (textIndex > x.length) {textIndex = 1}  
     x[textIndex-1].style.display = "block"; 
     setTimeout(displayText, 2500);   
    } 



<div class="container"> 
    <div class="mySlides"> 
     <img src="Images/slide1.jpg"> 
     <div class="text">Yunnan, China</div> 
    </div> 

    <div class="mySlides"> 
     <img src="Images/slide2.jpg"> 
     <div class="text">Namib Desert, Africa</div> 
    </div> 

    <div class="mySlides"> 
     <img src="Images/slide3.jpg"> 
     <div class="text">Rapeseed fields in Luoping, China</div> 
    </div> 

    <div class="mySlides"> 
     <img src="Images/slide4.jpg"> 
     <div class="text">Colorado, USA</div> 
    </div> 

</div> 

Answer 1

Похоже, что вы звоните DisplayText каждые 2500 секунд, которые сделают ваш текст шоу ан дополнительного 500мса экспоненциально больших каждый раз

, например,

img 1 = 2000 
text 1 = 2500 (+500) 

img 2 = 4000 
text 2 = 5000 (+1000) 

img 3 = 6000 
text 3 = 7500 (+1500) 

и т.д.

вам нужно будет вызвать функцию displayText() 500 мс после того, как ваше изображение затухает.

function displayImage() { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    imageIndex++; 
    if (imageIndex > x.length) {imageIndex = 1}  
    x[imageIndex-1].style.display = "block"; 
    setTimeout(displayText, 500); 
    setTimeout(displayImage, 2000); // Change image every 2 seconds 
} 

function displayText() { 
    var i; 
    var x = document.getElementsByClassName("text"); 
    for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
    } 
    textIndex++; 
    if (textIndex > x.length) {textIndex = 1}  
    x[textIndex-1].style.display = "block";   
} 

Это должно запускать вашу функцию каждый раз, когда изображение изменяется, но только через полсекунды.

Answer 2

Это не работает, потому что изображение дисплея и текст дисплея срабатывают в разное время? это должно помочь:

var imageIndex = 0; 
    var textIndex = 0; 
    var timeText = 0; 
    setInterval(displayImage, 2000); 

    function displayImage() { 
     if(timeText !== 0) { //just in case displayImage() takes more than 2000 miliseconds. 
      clearTimeout(timeText); 
     } 
     var i; 
     var x = document.getElementsByClassName("mySlides"); 
     for (i = 0; i < x.length; i++) { 
      x[i].style.display = "none"; 
     } 
     imageIndex++; 
     if (imageIndex > x.length) {imageIndex = 1}  
     x[imageIndex-1].style.display = "block";    
     timeText = setTimeout(displayText, 500); 
    } 

    function displayText() { 
     var i; 
     var x = document.getElementsByClassName("text"); 
     for (i = 0; i < x.length; i++) { 
      x[i].style.display = "none"; 
     } 
     textIndex++; 
     if (textIndex > x.length) {textIndex = 1}  
     x[textIndex-1].style.display = "block"; 
    }