javascript - 如何使模态图像在自动图像 slider 上工作？

Question

因此我的网站中有自动更改图像，这是我需要的: 当我点击图片时，模态图片库应该出现。但只有一张图片在自动 slider 中起作用。我不知道如何让其他图片像第一张一样弹出，也不知道当模态已经“打开”时如何制作 slider ，或者我应该怎么说...

这是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>

代码: https://jsfiddle.net/y1Lw0k9d/3/

Answer 1

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

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

要更改模态中的图像，只需在轮播功能中更改模态图像的 SRC。这样，模态图像始终与另一个 slider 相同。也许添加或更改一些 CSS 以获得某些效果。

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