我知道,我知道,我也想知道,可我就是想知道。”我正在制作我自己的photosite,我被困在这里与下一个/上一个按钮在模态。怎么办?
<img id="myImg" src="myimage" alt="wjuuuu" width="760" height="478">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a 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;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
2条答案
按热度按时间aoyhnmkz1#
与其重复做这样的事情,为什么不尝试一些有效的事情呢?在做一些非常类似于你想做的事情时,我使用了Blueimp gallery。它的设置很简单,上一个/下一个按钮都可以工作,包括使用箭头键和在移动的上。
khbbv19g2#
正如Steve科克伦所建议的那样,最好使用一些库来实现你想要做的事情,但是如果你只是打算玩HTML和Javascript,你的上一个/下一个按钮应该和关闭按钮完全一样工作。
1.给予它们的DOM元素一个ID
1.通过脚本中的ID检索DOM元素
1.附加单击侦听器
1.执行上一个或下一个操作背后的逻辑
由于我们不知道图像来自哪里,因此无法为您实现previous和next函数。希望能帮上忙。