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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="text-align:center"> <h2>Tabbed Image Gallery</h2> <p><a onclick="left();" id="left">L</a> | <a onclick="right();" id="right">R</a> </div> <!-- The four columns --> <div class="row"> <div class="column"> <img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Nature" style="width:100%" class="images" onclick="myFunction(this);elementID(this);"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%" class="images" onclick="myFunction(this);elementID(this);"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%" class="images" onclick="myFunction(this);elementID(this);"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_lights.jpg" alt="Lights" style="width:100%" class="images" onclick="myFunction(this);elementID(this);"> </div> </div> <div class="container"> <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span> <img id="expandedImg" style="width:100%"> <div id="imgtext"></div> </div> 

Answer 1

使用jQuery中的next()和prev()尝试此解决方案。

 var currentEl; // track current el $(document).ready(() => { $('.column').on('click', function() { // bind clicks currentEl = this; addImage($(this).find('img')); }); $('.closebtn').on('click', function() { // bind clicks to close button currentEl = undefined; // either you can do this to reset the flow, or comment to maintain the flow }); }); function addImage(img) { var expandImg = document.getElementById("expandedImg"); var imgText = document.getElementById("imgtext"); expandImg.src = img[0].src; expandImg.parentElement.style.display = "block"; } function right() { // jump to next var next = currentEl ? $(currentEl).next() : $('.column').first(); if (next.length > 0) { addImage($(next).find('img')); currentEl = next; } } function left() { // jump to prev var prev = currentEl ? $(currentEl).prev() : $('.column').first(); if (prev.length > 0) { addImage($(prev).find('img')); currentEl = prev; } } 

 * { 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; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="text-align:center"> <h2>Tabbed Image Gallery</h2> <p><a onclick="left();" id="left">L</a> | <a onclick="right();" id="right">R</a> </div> <!-- The four columns --> <div class="row"> <div class="column"> <img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Nature" style="width:100%" class="images"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%" class="images"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%" class="images"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_lights.jpg" alt="Lights" style="width:100%" class="images"> </div> </div> <div class="container"> <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span> <img id="expandedImg" style="width:100%"> <div id="imgtext"></div> </div>