在模式中添加下一个/上一个按钮

Posted 2023-02-25

【中文标题】在模式中添加下一个/上一个按钮

【英文标题】：Next/previous buttons to add in a modal

【发布时间】：2016-10-07 20:22:21

【问题描述】：

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

<img id="myImg" src="myimage"   >


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

【问题讨论】：

我不明白您想要做什么，您的 HTML 中没有“上一个”或“下一个”按钮。点击后会发生什么？

我想将下一个和上一个箭头添加到我已经创建的这个 html 中。但我不知道怎么做。

【参考方案1】：

与其重新做这样的事情，为什么不尝试一些可行的事情呢？在做与您想做的非常相似的事情时，我使用了Blueimp gallery。设置简单，上一个/下一个按钮都可以使用，包括使用箭头键和在移动设备上。

【讨论】：

非常感谢....我会尝试使用 Blueimp 库，看看我能从中得到什么。

【参考方案2】：

正如 Steve Cochrane 所建议的，最好使用一些库来实现您想要做的事情，但如果您只是打算使用 HTML 和 javascript，您的上一个/下一个按钮应该与关闭按钮完全一样。

给他们的 DOM 元素一个 ID 在脚本中按 ID 检索 DOM 元素 附加点击监听器 执行上一个或下一个操作背后的逻辑

<img id="myImg" src="myimage"   >


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

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

【讨论】：

我会按照史蒂夫的建议尝试制作 Blueimp 画廊。无论如何感谢您的帮助，我真的很感激。