下一个和上一个JavaScript按钮

时间：2019-01-31 18:09:09

标签： javascript

我制作了一个图片库，但是决定添加按钮“上一个”和“下一个”，这样它将显示“上一个”和“下一个”图像，但是它不起作用，并且一直在查找问题出在哪里，但是找不到问题，因为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>

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题