带有 JS 和 CSS 的 HTML 图像库

Question

我正在尝试使用 HTML、CSS 和 JS 制作一个图片库。CSS 可以工作，但 JS 有问题。我已经做到了，因此您可以单击图像或单击按钮以按顺序查看所有图像。但是，如果我单击第三个或第四个图像并单击L按钮（代表 LEFT），它会从该图像跳转到第一个图像。出于某种原因，它只是不想显示第二张图片。

我已经尝试解决这个问题几个小时了，但它仍然无法正常工作。

var num = 0;

function elementID(indexes) {

    var index = $(".images").index(indexes);

    var num = index;

}

function myFunction(imgs) {

    var expandImg = document.getElementById("expandedImg");

    var imgText = document.getElementById("imgtext");

    expandImg.src = imgs.src;

    expandImg.parentElement.style.display = "block";

}

function right() {

    if (num >= document.getElementsByClassName('images').length - 1) {

        num = document.getElementsByClassName('images').length - 1;

    } else {

        num++; 

    }

    var expandImg2 = document.getElementById("expandedImg");

    var image = document.getElementsByClassName('images')[num];

    expandImg2.src = image.src;

}

function left() {

        if (num <= 0) {

        num++;

        return false;

    } else {

    num--; 

    }

    var expandImg2 = document.getElementById("expandedImg");

    var image = document.getElementsByClassName('images')[num];

    expandImg2.src = image.src;

}

* {

  box-sizing: border-box;

}

body {

  margin: 0;

  font-family: Arial;

}

/* The grid: Four equal columns that floats next to each other */

.column {

  float: left;

  width: 25%;

  padding: 10px;

}

/* Style the images inside the grid */

.column img {

  opacity: 0.8; 

  cursor: pointer; 

}

.column img:hover {

  opacity: 1;

}

/* Clear floats after the columns */

.row:after {

  content: "";

  display: table;

  clear: both;

}

/* The expanding image container */

.container {

  position: relative;

  display: none;

}

/* Expanding image text */

#imgtext {

  position: absolute;

  bottom: 15px;

  left: 15px;

  color: white;

  font-size: 20px;

}

/* Closable button inside the expanded image */

.closebtn {

  position: absolute;

  top: 10px;

  right: 15px;

  color: white;

  font-size: 35px;

  cursor: pointer;

}