下一个和上一个JavaScript按钮

Question

我制作了一个图片库，但是决定添加按钮“上一个”和“下一个”，因此它将显示“上一个”和“下一个”图像，但是它不起作用，并且一直在查找问题出在哪里，但是找不到问题，因为Console.Log没有显示任何错误。 谁能看看下面的代码并尝试解决它？ 谢谢 ：：：

 let modal = document.querySelector('.modal'); let images = document.querySelectorAll('img'); let modalImg = document.getElementById('img01'); let prevBtn = document.querySelector('.img-left'); let nextBtn = document.querySelector('.img-right'); let i = 0; window.addEventListener('click', outsideClick); prevBtn.onclick = function () { slide[i].classList.remove('active'); i--; if (i < 0) { i = slide.length - 1; } slide[i].classList.add('active'); } nextBtn.onclick = function () { slide[i].classList.remove('active'); i++; if(i >= slide.length) { i = 0; } slide[i].classList.add('active'); } function outsideClick(e) { if(e.target === modal) { modal.style.display = 'none'; } } for (let i = 0; i < images.length; i++) { let img = images[i]; img.onclick = function(e) { modal.style.display = 'block'; modalImg.src = this.src; } } 

 .container{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 4px; align-items: center; padding-left: 370px; } .grids2{ grid-column: 2; grid-row: 2; } .grids3{ grid-column: 2; grid-row: 2/1; } .grids4{ grid-column: 1; grid-row: 2; } .grids5{ grid-column: 2; grid-row: 2; } img{ width: 410px; height: 290px; cursor: pointer; } .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 150px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */ } .modal-content { margin: auto; display: block; width: 600px; height: 400px; max-width: 700px; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; color:red; } .img-right{ position: absolute; left: 72%; top: 36%; cursor: pointer; background-color:yellowgreen; font-size: 48px; transition: 0.2s; width: 96px; height: 90px; } .img-left{ position: absolute; right: 72%; top: 36%; cursor: pointer; font-size: 48px; background-color:yellowgreen; transition: 0.2s; width: 96px; height: 90px; } .img-left:hover{ transform: scale(1.2) } .img-right:hover{ transform: scale(1.2) } /*End of Slideshow*/ 

  <div class="container"> <div class="grid2s"> <img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg"> </div> <div class="grids3"> <img src="https://s3.amazonaws.com/tinycards/image/009ffb0bab62af8a498d2493c1dfd927"> </div> <div class="grids4"> <img src="https://ichef.bbci.co.uk/childrens-responsive-ichef-live/r/880/1x/cbbc/Animaltastic_Ambigous_Animals_Names_1024_576.jpg"> </div> <div class="grids5"> <img src="https://ichef.bbci.co.uk/images/ic/976x549/p04f5x5v.jpg"> </div> </div> <div class="modal"> <img class="modal-content animated fadeIn" id="img01"> <img class="img-left" src="https://image.flaticon.com/icons/svg/467/467282.svg"> <img class="img-right" src="https://image.flaticon.com/icons/svg/467/467274.svg"> </div> 

Answer 1

let images = document.querySelectorAll('img');
// Don't include arrows in array of pictures for slider !
let images = document.querySelectorAll('.container img');

然后...未定义单击功能中使用的slide数组。 我认为images和slide var应该相同。

然后，一切都按预期工作：每次单击上一个或下一个按钮时， .active类都会跳过每个图像。

最后，您只需要更新模式内容，例如：

modalImg.src = slide[i].src;

 let modal = document.querySelector('.modal'); let slide = document.querySelectorAll('.container img'); let modalImg = document.getElementById('img01'); let prevBtn = document.querySelector('.img-left'); let nextBtn = document.querySelector('.img-right'); let i = 0; window.addEventListener('click', outsideClick); prevBtn.onclick = function () { slide[i].classList.remove('active'); i--; if (i < 0) { i = slide.length - 1; } modalImg.src = slide[i].src; slide[i].classList.add('active'); } nextBtn.onclick = function () { slide[i].classList.remove('active'); i++; if(i >= slide.length) { i = 0; } modalImg.src = slide[i].src; slide[i].classList.add('active'); } function outsideClick(e) { if(e.target === modal) { modal.style.display = 'none'; } } for (let i = 0; i < slide.length; i++) { let img = slide[i]; img.onclick = function(e) { modal.style.display = 'block'; modalImg.src = this.src; } } 

 .container{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 4px; align-items: center; padding-left: 370px; } .grids2{ grid-column: 2; grid-row: 2; } .grids3{ grid-column: 2; grid-row: 2/1; } .grids4{ grid-column: 1; grid-row: 2; } .grids5{ grid-column: 2; grid-row: 2; } img{ width: 410px; height: 290px; cursor: pointer; } .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 150px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */ } .modal-content { margin: auto; display: block; width: 600px; height: 400px; max-width: 700px; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; color:red; } .img-right{ position: absolute; left: 72%; top: 36%; cursor: pointer; background-color:yellowgreen; font-size: 48px; transition: 0.2s; width: 96px; height: 90px; } .img-left{ position: absolute; right: 72%; top: 36%; cursor: pointer; font-size: 48px; background-color:yellowgreen; transition: 0.2s; width: 96px; height: 90px; } .img-left:hover{ transform: scale(1.2) } .img-right:hover{ transform: scale(1.2) } /*End of Slideshow*/ 

 <div class="container"> <div class="grid2s"> <img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg"> </div> <div class="grids3"> <img src="https://s3.amazonaws.com/tinycards/image/009ffb0bab62af8a498d2493c1dfd927"> </div> <div class="grids4"> <img src="https://ichef.bbci.co.uk/childrens-responsive-ichef-live/r/880/1x/cbbc/Animaltastic_Ambigous_Animals_Names_1024_576.jpg"> </div> <div class="grids5"> <img src="https://ichef.bbci.co.uk/images/ic/976x549/p04f5x5v.jpg"> </div> </div> <div class="modal"> <img class="modal-content animated fadeIn" id="img01"> <img class="img-left" src="https://image.flaticon.com/icons/svg/467/467282.svg"> <img class="img-right" src="https://image.flaticon.com/icons/svg/467/467274.svg"> </div>