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

我正在尝试创建一个杂志风格的画廊，该画廊可以获取许多JPGS（18）并在2 div中进行渲染。然后，将使用向左和向右按钮加载接下来的2页。第一页将是关闭的封面。然后，页面将像跨页一样并排放置。

我创建了以下的半成品，将其加载到JPG列表中，然后单击下一步将图像推入div，然后进行迭代。主要的问题是，当按下next按钮更改页面时，一次迭代1，而不是切换到接下来的2页。

我试图在+1循环中将+2更改为for，但是它很好地加载了前2页，然后其余的每次只能迭代1页。

谁能给我一些建议，以改善和每次更改2页？

这是一个代码笔，可以使它更加清晰：

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

关于javascript - 在JS中创建杂志风格的画廊，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55451717/