将下一个和上一个按钮添加到JavaScript模式

Question

我制作了一个干净的模式，可以在网站上使用它来打开图像，一切正常，而且非常不错。

现在，我想制作下一张图像和上一张图像按钮，以获得更好的用户体验。我有一个计划，所以我找到了模态中当前图像的索引，然后在下一个按钮上将其递增一，在上一个按钮上将其递减一，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灯箱教程，但是它与我的代码有很大不同，我需要交换所有内容。有谁知道我如何用自己的代码来做到这一点？

Answer 1

如果您坚持要从头开始构建它，那么您将需要开始考虑应该用HTML和CSS控制什么，而其余的要用JavaScript处理。

我将使用带有HTML的Modal窗口集，并使用CSS对其进行隐藏，然后在图像链接和触发火灾时，将模式置于最前面。使用淡入淡出，不透明度和z-index来确保其位于正面。将背景设置为黑色以获得模态效果。

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

然后使用CSS覆盖，可能需要一些js，以适应您的喜好。