我正在尝试创建一个杂志风格的画廊,该画廊可以获取许多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>
答案 0 :(得分:1)
每次索引号为不为零(非封面)时,都必须在索引号中添加两个。
当前页位于封面(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;
}