Slideshow mit spezifischem Text auf jedem Bild

Question

Also habe ich diese kleine Slideshow mit HTML/CSS/JS gemacht und möchte jedem der 6 Bilder Text hinzufügen, aber ich kann nicht herausfinden, wie das geht, da ich nur ändern kann der Text meines ersten Bildes. Jede Hilfe wird geschätzt. Vielen Dank im Voraus.

var imagecount = 1; 
 
var total = 6; 
 

 
function slide(x) { 
 
    var Image = document.getElementById('img'); 
 
    imagecount = imagecount + x; 
 
    if (imagecount > total) { 
 
    imagecount = 1; 
 
    } 
 
    if (imagecount < 1) { 
 
    imagecount = total; 
 
    } 
 
    Image.src = "images/img" + imagecount + ".jpg"; 
 
} 
 

 
window.setInterval(function slideA(x) { 
 
    var Image = document.getElementById('img'); 
 
    imagecount = imagecount + 1; 
 
    if (imagecount > total) { 
 
    imagecount = 1; 
 
    } 
 
    if (imagecount < 1) { 
 
    imagecount = total; 
 
    } 
 
    Image.src = "images/img" + imagecount + ".jpg"; 
 
}, 3000);

#container { 
 
    height: 450px; 
 
    width: 650px; 
 
    margin: 20px auto; 
 
    position: relative; 
 
    z-index: 1; 
 
    border: 10px solid #000; 
 
    border-radius: 10px; 
 
} 
 
#img { 
 
    height: 450px; 
 
    width: 650px; 
 
} 
 
#left_holder { 
 
    height: 450px; 
 
    width: 100px; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
} 
 
#right_holder { 
 
    height: 450px; 
 
    width: 100px; 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 0px; 
 
} 
 
.left { 
 
    height: 50px; 
 
    width: 50px; 
 
    position: absolute; 
 
    top: 40%; 
 
    left: 0px; 
 
} 
 
.right { 
 
    height: 50px; 
 
    width: 50px; 
 
    position: absolute; 
 
    top: 40%; 
 
    right: 0px; 
 
} 
 
#text1 { 
 
    position: absolute; 
 
    color: #fff; 
 
    font-size: 32px; 
 
    background-color: #000; 
 
    opacity: 0.5; 
 
    left: 37%; 
 
    z-index: 2; 
 
}

<div id="container"> 
 
    <div id="text1">Text</div> 
 
    <img src="images/img1.jpg" id="img" /> 
 
    <div id="left_holder"> 
 
    <img onClick="slide(-1)" class="left" src="images/arrow_left.png" /> 
 
    </div> 
 
    <div id="right_holder"> 
 
    <img onClick="slide(1)" class="right" src="images/arrow_right.png" /> 
 
    </div> 
 
</div>

Answer 1

Wenn ich Sie richtig verstanden Sie einen neuen Text zu jedem Bild angehängt werden soll, die aufgerufen wird.
Um dies zu tun, empfehle ich Ihnen diese Funktion hinzufügen und ein neues Bild jedes Mal rufen wird (und das Ende der slide()) genannt:

function ChangeText(imgNum){ 
     var allImagesAndText = {1: "This is image 1", 2: "This is image 2"}; 
     document.getElementById("text1").innerHTML = allImagesAndText[imgNum]; 
}