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

时间:2019-04-01 09:17:46

标签: javascript

我正在尝试创建一个杂志风格的画廊,该画廊可以获取许多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>

1 个答案:

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