jquery图片分页 [英] jquery image pagination

问题描述

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

提前致谢

解决方案

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

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

HTML

<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"/>
<a href="#" class="prev">Prev</a><a href="#" class="next">Next</a>

jQuery

var start = 0;无功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') ){开始 -= nb;} 别的 {开始 += nb;}if( start <0 || start >= length ) start = 0;结束 = 开始 + nb;if( start == 0 ) list.hide().filter(':lt('+(end)+')').show();else list.hide().filter(':lt('+(end)+'):gt('+(start-1)+')').show();});

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?

Thanks in advance

解决方案

I made a quick demo, jsFiddle.

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屋！