Javascript 如何使模态图像在自动图像滑块上工作？

因此，我的网站中有自动更改的图像，以下是我需要的： 当我点击图像时，模态图像库应该出现。但只有一个图片的工作出所有在自动滑块。我不知道如何使其他图片像第一张一样弹出，我也不知道当模态已经“打开”时如何制作滑块，或者我应该如何说

这是javascript

    <script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 5000);    
}
</script>

<script>

var modal = document.getElementById('myModal');

 caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}


var span = document.getElementsByClassName("close")[0];


span.onclick = function() { 
    modal.style.display = "none";
}
</script>

var-myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
对于（i=0；ix.length）{myIndex=1}
x[myIndex-1].style.display=“block”；
设置超时（旋转木马，5000）；
}
var modal=document.getElementById（'myModal'）；
说明文字
var img=document.getElementById（'myImg'）；
var modalImg=document.getElementById（“img01”）；
var captionText=document.getElementById（“caption”）；
img.onclick=函数（）{
modal.style.display=“块”；
modalImg.src=this.src；
captionText.innerHTML=this.alt；
}
var span=document.getElementsByClassName（“关闭”）[0]；
span.onclick=function（）{
modal.style.display=“无”；
}

守则：

---

在HTML中，一个ID每页只能使用一次，而不是给你的图像ID myImg，尝试使用一个类。您可以在旋转木马功能中正确执行此操作

但是，在附加click处理程序之前，使用getElementById，它返回单个元素。您应该使用类名获取图像，并在数组中循环以将处理程序附加到每个图像

要更改模式中的图像，只需在carousel函数中更改模式图像的SRC。这样，模态图像始终与其他滑块相同。可能会添加或更改一些CSS以获得一些效果

我没有写任何实际的代码，因为看着你的代码，你看起来足够聪明，可以自己写出来并从中学习