Question

在这个世界上完全是新的，但我只是喜欢它，我想要充分利用它。我正在制作我自己的照片，我被困在模态中的下一个/上一个按钮。怎么办？

＆＃13;

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

＆＃13;

Answer 1

为什么不尝试一些有效的东西，而不是重做这样的事情呢？在做与你想做的事情非常相似的事情时，我使用了Blueimp gallery。设置简单，上一个/下一个按钮有效，包括使用箭头键和移动设备。

Answer 2

正如Steve Cochrane建议的那样，最好使用一些库来实现你想要做的事情，但如果你只打算使用HTML和Javascript，你的上一个/下一个按钮应该像关闭按钮一样工作。

为其DOM元素提供ID
按脚本
附加点击监听器
执行上一个或下一个操作背后的逻辑

<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>
  <span id="previous">&lt;</span>
  <span id="next">&gt;</span>
</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";
}

// Get the previous button
var previous = document.getElementById('previous');
previous.onclick = function() {
  /* your logic here */
}

// Get the next button
var next = document.getElementById('next');
next.onclick = function() {
  /* your logic here */
}
</script>

由于我们不知道图像的来源，我们无法为您实现上一个和下一个功能。希望有所帮助。

下一个/上一个按钮添加到模态中

2 个答案: