幻燈片放映與每個圖像上的特定文本

Question

因此，我用HTML/CSS/JS做了這個小幻燈片，我想爲每張圖片添加文字，但我無法弄清楚如何做，因爲我只能改變我的第一張圖片的文字。任何幫助表示讚賞。提前謝謝了。

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

如果我理解正確你要追加一個新的文本每一個被稱爲圖像。
爲了做到這一點，我建議你添加此功能，每一個新的圖像被稱爲時間（和slide()末）稱之爲：

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