使用JavaScript将下一步和上一步按钮添加到模式

Question

我已经做了一个干净的模式，用于在网站上打开图像，一切都很好，非常好。

现在我想做一个下一个图像和上一个图像按钮，以获得更好的用户体验。我有一个计划，所以我在模式中找到当前图像的索引，然后在下一个按钮上递增1，然后在上一个按钮上递减1，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 lightbox教程，但它与我的代码太不同了，我需要交换所有内容。有没有人知道我怎么用我自己的代码做到这一点？

A jsFiddle现在是什么样子https://jsfiddle.net/superVoja/eoyda1vh/15/

Answer 1

如果你坚持从头开始构建，那么你需要开始考虑你应该用超文本标记语言和CSS来控制什么，剩下的就交给JavaScript来做。

我会使用模式窗口设置与Html和CSS隐藏它，然后当图像链接和触发器触发时，我会把模式放在前面。使用fadein淡出，不透明度和z索引，以确保这是在前面。设置背景为黑色，以获得模态效果。

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

然后使用CSS和一些js进行覆盖，以便根据您的喜好进行调整。

Answer 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看起来的样子！