Блог

Я пытаюсь создать галерею в стиле журнала, которая может извлекать несколько файлов JPG (18) и отображать их в 2-х разделах. Затем левая и правая кнопки будут использоваться для загрузки следующих 2 страниц. Первой страницей будет обложка, которая будет закрыта. Затем страницы будут располагаться рядом, как разворот.

Я создал следующее, которое работает наполовину, оно загружается в список файлов JPG, а следующая кнопка помещает изображение в div, а затем повторяет. Основная проблема заключается в том, что при нажатии кнопки next для изменения страницы она повторяется по 1 за раз вместо перехода на следующие 2 страницы.

Я попытался изменить 1 на 2 в for цикле, но он отлично загружает первые 2 разворота страницы, а затем остальные повторяет только по 1 странице за раз.

Кто-нибудь может дать мне несколько советов о том, как это можно улучшить и изменять по 2 страницы за раз?

Вот codePen, чтобы сделать это немного понятнее:

https://codepen.io/nolimit966/pen/JVoPJq

Спасибо

  var pages = [
    {"name":"img1", "src":"images/1.jpg"},
    {"name":"img2", "src":"images/2.jpg"},
    {"name":"img3", "src":"images/3.jpg"},
    {"name":"img4", "src":"images/4.jpg"},
    {"name":"img5", "src":"images/5.jpg"},
    {"name":"img6", "src":"img/prod-6.png"},
    {"name":"img7", "src":"img/prod-7.png"},
    {"name":"img8", "src":"img/prod-8.png"},
    {"name":"img9", "src":"img/prod-9.png"},
  ];

imgIndex = 0;

document.getElementById("image2").src = pages[0].src;

document.getElementById("nextBtn").addEventListener("click", function(){

  var page2 = document.getElementById("image1")

    if(pages.length > imgIndex 1){
      imgIndex  ;
    // page1.classList.toggle('is-active');
      document.getElementById("image1").style.display = "block";
       document.getElementById("image1").src = pages[imgIndex].src;
      document.getElementById("image2").src = pages[imgIndex 1].src;
    } else {
    	console.log("its zero");
      imgIndex = 0;
    }

});  

 <button id="prevBtn">Previous</button>
<button id="nextBtn">Next</button>

<div id="container">
  
 <div id="page1">
   <img src="" id="image1" alt="" style="display:none;"/>
 </div>

 <div id="page2">
<img src="" id="image2" alt=""/>
 </div>

</div>  

Вы должны добавлять два к номеру индекса каждый раз, когда номер индекса не равен нулю (не на титульной странице)

Когда текущая страница находится на титульной странице (imgIndex= 0)

imgIndex 0 -> 1: отображать imgIndex 1 и 2

Когда текущая страница не находится на титульной странице (imgIndex>0)

imgIndex 1 -> 3: отображение imgIndex 3 и 4

imgIndex 3 -> 5: отображение imgIndex 5 и 6

Поэтому вместо

 imgIndex  ;
  

Попробуйте это

 if(imgIndex == 0){
    imgIndex  ;
}else {
    imgIndex  = 2;
}