带有 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;}