Javascript slideshow which changes the text 0.5 seconds after the image is changed

Question

I need to make an HTML page with a slideshow. The photos from the slideshow have to change every 2 seconds. And 0.5 seconds after the current image is displayed a text should be displayed over the image. And this should be made without using jQuery or other libraries, just javascript functions. This is what i have right now but its not working properly.

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

It doesn't work because the display image and display text fire at different times? this should help:

    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";  
    }

Answer 2

It looks like you're calling displayText every 2500 seconds, which will make your text show en extra 500ms exponentially larger every time

for example,

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

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

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

etc.

you will need to call your displayText() function 500ms after your image fades in.

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";         
}

This should run your function every time an image changes, but only after half a second.