Javascript 在JS中创建杂志样式库

我正在尝试创建一个杂志风格的画廊，可以获取一些JPG（18），并呈现在2个div他们。然后使用左右按钮加载接下来的2页。第一页将是封面，上面将关闭。然后，书页会像一张平铺一样并排排列

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

我试图在

for

循环中将

+1

更改为

+2

，但它加载了前两页的排列，其余的一次只迭代一页

有谁能给我一些建议，如何改进这一点&一次换两页

下面是一个代码笔，让它更清晰一些：

多谢各位

var页面=[
{“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（“单击”，函数（）{
var page2=document.getElementById（“image1”）
如果（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；
}否则{
console.log（“其零”）；
imgIndex=0；
}
});
上一个
下一个
当索引编号不是零时，每次必须在索引编号中添加两个（非封面）

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

为什么
+2
会引起问题？什么问题？还有，既然有无数免费的图片库/旋转木马，为什么还要麻烦创建另一个图片库/旋转木马呢？谢谢你的帮助，非常感谢