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

您似乎每 2500 秒调用一次 displayText，这将使您的文本每次显示额外 500 毫秒呈指数级增长

例如，

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

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

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

等等

您需要在图像淡入 500 毫秒后调用 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(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";  
    }

Javascript 幻灯片，在图像更改后 0.5 秒更改文本

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

html

javascript

slideshow