Question

这是我的情况：我有一个图像库，主页上有10个图像和一个分页栏。图像来自json文件的for循环迭代。没问题，他们就在那里; - ）

像：对于i = 0;我＆lt; 10;我++ 用样式和图像创建div [i] .image;

我的问题是：我想在第2页上显示接下来的10张图像，因此当您点击第2页时，它会从11到20计数。我找到了jQuery＆＃39; Jpaginate＆＃39; -plugin ...... 我能用这个插件实现吗？有人可以用Vars，Counts，Objects的方式解释我吗？

谢谢和亲切的问候，麦克

Answer 1

您可以创建自己的分页插件。您必须将当前页面存储在某处并修改您的工厂。

类似于：for i = current_page * count_per_page;我＆lt; count_per_page *（current_page + 1）; i ++用样式和图像创建div [i] .image;

Answer 2

我已经让你成为一个如何处理这个问题的例子。我不是说它是防错的，但这是重要的概念。您可能会找到一些灵感，也许可以达到目标。

var imgSrc = "https://s-media-cache-ak0.pinimg.com/236x/36/a5/7b/36a57b0f0ab16e885fcc230addb695c2.jpg";
var json = [];
for (var i = 0; i < 36; i++)
  json.push({
    Title: "Title " + (i + 1),
    Source: imgSrc
  });

/*
Just for ease, I'm creating an array with 36 objects (3x3 gallery)
so 9 images per page
*/

var pageLimit = 9;
var page = 1;

showImages();


$("#btnPrevious").click(function() {
  if (pageLimit <= 9) {
    pageLimit = 9;
    page = 1;
  } else {
    page--;
    pageLimit -= 9;
  }
  showImages();
});

$("#btnNext").click(function() {
  if (pageLimit >= json.length) {
    pageLimit = json.length;
  } else {
    page++;
    pageLimit += 9;
  }
  showImages();
});

function showImages() {
  $(".images").empty();
  for (var i = pageLimit - 9; i < pageLimit; i++) {
    var template = $("<div></div>").addClass("template");

    var img = $("<img>");
    img.attr("src", json[i].Source);
    img.attr("alt", json[i].Title);

    var br = $("<br/>");

    var title = $("<span></span>").html(json[i].Title);

    template.append(img).append(br).append(title);

    $(".images").append(template);
  }
  $("#page").html("Page " + page);
}

.gallery {
  width: 100%;
  height: 500px;
  border: 1px solid black;
  background-color: lightgray;
  text-align: center;
}
.images {
  width: 90%;
  margin: 0 auto;
  height: 100%;
  margin-bottom: 15px;
}
img {
  height: auto;
  width: 33%;
  margin: 20px 5px;
}
.template {
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="images"></div>
  <button id="btnPrevious">
    &lt; Previous
  </button>
  <span id="page"></span>
  <button id="btnNext">
    &gt; Next
  </button>
</div>

不介意CSS，因为我很糟糕（笑）。它基于我在jsFiddle上的空间，但现在看它（在整页或只是片段提供的区域）它看起来很糟糕。如果一个CSS大师可以解决这个问题。问题中的问题？

图片库，包含最大项目和javascript分页

2 个答案: