使用 JavaScript 将下一个和上一个按钮添加到模态答案

【问题标题】：Adding Next & Previous Buttons to modal with JavaScript使用 JavaScript 将下一个和上一个按钮添加到模态
【发布时间】：2019-10-17 08:25:56
【问题描述】：

我已经制作了一个干净的模态，用于在网站上打开图像，一切正常并且非常好。

现在我想制作下一张图片和上一张图片按钮，以获得更好的用户体验。我有一个计划，所以我找到了模态中当前图像的索引，并在下一个按钮上将其增加一，在上一个按钮上将其减少一，HM ok 似乎很容易。那么我该怎么做呢？这是我的模态代码

window.onload = function() {
  var imgArr = document.getElementsByClassName("myImg");

  var modalWindow = document.getElementById("myModal");
  var modalImg = document.getElementById("img01");
  var caption = document.getElementById("caption");
  var span = document.getElementById("close");
  var modalBlock = document.getElementById("modalBlock");

  for (i = 0; i < imgArr.length; i++) {
    var picture = imgArr[i];
    var list = Array.from(imgArr);

    picture.onclick = function() {
      openImg(this);
      var index = list.indexOf(this);
      console.log(index);
    };
  }

  function openImg(pic) {
    modalWindow.style.display = "block";
    modalBlock.style.transform = "translateY(0%)";
    modalImg.src = pic.src;
    modalImg.alt = pic.alt;
    caption.innerHTML = modalImg.alt;
    imgIndex = picture[i];

    bodyScrollLock.disableBodyScroll(myModal);
  }






};

现在我有我点击的打开图像及其索引，我不知道下一步该做什么。我找到了 w3 灯箱教程，但它与我的代码如此不同，我需要交换所有内容。有谁知道我如何用自己的代码做到这一点？

一个 jsFiddle 它现在的样子 https://jsfiddle.net/superVoja/eoyda1vh/15/

【问题讨论】：

标签： javascript html button lightbox simplemodal

【解决方案1】：

如果您坚持从头开始构建它，那么您将需要开始考虑应该使用 HTML 和 CSS 控制哪些内容，而剩下的则由 JavaScript 完成。

我会使用带有 Html 的模态窗口设置并使用 CSS 隐藏它，然后当图像链接和触发器触发时，我会将模态窗口置于前面。使用淡入淡出、不透明度和 z-index 确保它在前面。将背景设置为黑色以获得模态效果。

更快的方法是使用像Lightbox js这样的库

然后根据需要使用 CSS 和一些 js 覆盖以适应您的喜好。

【讨论】：

感谢您的回复。我已经用很好的效果和所有东西完成了这个，现在我只想使用下一个和上一个按钮，但我无法思考如何用我自己的代码来做到这一点。
那么你为什么不在这里分享一个代码。将您的带有 css 的代码上传到 jsfiddle.com 并分享回链接。
这是一个 jsfiddle link

【解决方案2】：

好吧，这就是我自己得到的答案，如果有人阅读了这篇文章，请给自己一些时间，你会自己找到答案！

我按照我的代码做了我想做的事情，我找到了被点击的图像的索引，然后我像这样将它增加了一个。

var next = this.document.getElementById("next");
  var slideIndex = "";

  for (i = 0; i < imgArr.length; i++) {
    var picture = imgArr[i];
    var list = Array.from(imgArr);
    picture.onclick = function() {
      var index = list.indexOf(this);

      slideIndex = index;
      openImg(imgArr[index]);
      console.log(index);
    };
  }

  next.addEventListener("click", function(event) {
    openImg(imgArr[(slideIndex += 1)]);
  });

它可能看起来不漂亮，但它是我的，我为它感到骄傲！

这里是a link 它的样子！

【讨论】：