javascript - 用 JS 创建杂志风格的画廊

Question

我正在尝试创建一个杂志风格的画廊，它可以获取大量 JPGS (18) 并将它们渲染为 2 个 div。然后使用向左和向右按钮加载接下来的两页。第一页是封面，将关闭。然后页面就会像跨页一样并排。

我创建了以下半工作的内容，它加载到 JPG 列表中，然后下一个按钮将图像推送到 div，然后进行迭代。主要问题是，当按下下一个按钮更改页面时，它一次迭代 1，而不是更改到接下来的 2 页。

我尝试将 for 循环中的 +1 更改为 +2，但它加载了前 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>

Answer 1

每次当索引号不为零(非封面页)时，您必须在索引号上添加 2

当当前页面位于封面时(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;
}