Question

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

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

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

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

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

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

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

1 个答案: