jQuery图像分页 [英] jquery image pagination

问题描述

我在jsp文件中有一个图像列表，我想一次显示5个页面.如何使用jquery做到这一点?

I have list of images in my jsp file that i want to display 5 at a time with pagination. How to do this using jquery?

预先感谢

推荐答案

我做了一个快速演示， jsFiddle .

I made a quick demo, jsFiddle.

上一个和下一个链接是可选的. 只需更改"var start = 0"即可.

The prev and next link are optional. Just change the "var start = 0" if needed.

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" />
    <img src="" alt="13" />
    <img src="" alt="14" />
    <img src="" alt="15" />
</div>
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a>

jQuery

var start = 0;
var nb = 5;
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 -= nb;
   } else {
       start += nb;
   }

   if( start < 0 || start >= length ) start = 0;
   end = start + nb;       

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

这篇关于jQuery图像分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！