jquery图片分页答案

【问题标题】：jquery image paginationjquery图片分页
【发布时间】：2011-03-10 13:06:48
【问题描述】：

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

提前致谢

【问题讨论】：

标签： jquery pagination

【解决方案1】：

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

上一个和下一个链接是可选的。如果需要，只需更改“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();
});

【讨论】：

它在demo中工作，因为来源是空的，所以会显示alt，你只需要为图像填写“src”属性。
是的，我用图像填充了 src。图像正在显示。但是没有发生分页。虽然我检查了 jsFiddler。
我的代码和你的代码一样。我没有改变任何东西。只是我在 src 中填充了图像...
好的。您必须在 html 代码中包含 jquery javascript 文件，并将 javascript 代码包装在 $(document).ready(function(){ ... });所以和

【解决方案2】：

可能是您想说图像滑块。检查我用谷歌搜索的链接。

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

【讨论】：

【解决方案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;
});

【讨论】：

它会显示jsp文件中的所有图片吗？你能简单解释一下吗？