各画像に特定のテキストを含むスライドショー

Question

この小さなスライドショーをHTML/CSS/JSで作成し、それぞれ6枚の画像にテキストを追加したいのですが、変更するだけで私の最初のイメージのテキスト。どんな助けもありがとうございます。事前に多くの感謝。

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

私が正しくあなたを理解した場合には、呼び出されるすべての画像に新しいテキストを追加します。

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