带有分页 Jquery 的图片库

Question

想要在一行中显示 4 张图像，在一个页面中显示 3 行。所以一页总共有12张图片.. 在图库中，如果我有超过 12 张图片，需要实现分页。

几乎没有尝试获取链接或资源或插件来实现这一点。 我不知道该怎么做。我是 jquery 的新手。 请帮我解决这个问题。

Answer 1

好的，你能考虑一下这个解决方案吗：

我的小提琴在这里： https://jsfiddle.net/u4y1t6ga/1/

我已将其设置为 2x2，但您可以随意修改。

如果您希望将其更新为 12 - 3 行 x 4 行 在 JS 更新 nb = 12 在 CSS 中将第 n 个孩子更新为 4n+1

HTML：

<div class="img-list">
    <img src="" alt="1" />
    <img src="" alt="2" />
    <img src="" alt="3" />
    <img src="" alt="4" />
    <img src="" alt="5" />
    <img src="" alt="6" />
    <img src="" alt="7" />
    <img src="" alt="8" />
    <img src="" alt="9" />
    <img src="" alt="10" />
    <img src="" alt="11" />
    <img src="" alt="12" />
</div>
<a href="#" class="prev">Page 1</a>
<a href="#" class="next">Page 2</a>

CSS：

.img-list, .pagination
{
  float: left;
  clear:both;
  display: block;
}

.img-list img {
 float: left;
}

.img-list img:nth-child(4n-1) {
 clear:both;
}

JS (+jQuery)

var start = 0;
var nb = 4;
var end = start + nb;
var length = $('.img-list img').length;
var list = $('.img-list img');

list.hide().filter(':lt('+(end)+')').show();


$('.prev, .next').click(function(e){
  e.preventDefault();

  if (($(this).hasClass('prev') && start > 0) || ($(this).hasClass('next') && end < length))
  {

    if( $(this).hasClass('prev') ){
      start -= nb;
    } else {
      start += nb;
    }

    end = start + nb;

    if((start/nb) < 1)
    {
      $('a.prev').html('Page 1');
    }
    else
    {
      $('a.prev').html('Page '+(start/nb));
    }


    if(end+nb > length) {
      $('a.next').html('Page '+((end/nb)));
    } else {
      $('a.next').html('Page '+((end/nb)+1));
    }
  }

  if( start == 0 ) list.hide().filter(':lt('+(end)+')').show();
  else list.hide().filter(':lt('+(end)+'):gt('+(start-1)+')').show();
});

如果您需要一些更复杂的解决方案，我建议您使用已经创建的插件。像这样的东西：https://pagination.js.org/ 并且只需更新 css 以按预期方式显示元素。 （即按 3 行 x 每行 4 张图像推送元素）。