Question

我的jsp文件中有图像列表，我希望一次显示5个分页。如何使用jquery做到这一点？

提前致谢

Answer 1

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

prev和next链接是可选的。如果需要，只需更改“var start = 0”。

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();
});

Answer 2

可能是你想说的图片滑块。检查我用Google搜索的链接。

http://vandelaydesign.com/blog/web-development/jquery-image-galleries/

Answer 3

您可以修改JSP以接受两个参数（例如startImg，howMany），并根据这些参数输出一些HTML以注入页面：

$("a.pageNumber").click(function() {
    $.get('images.jsp', {startImg: $(this).text(), howMany: 5}, function(response) {
        $("#imageDiv").html(response); // response contains some <img/> tags
    });
    return false;
});

jquery图像分页

3 个答案: