jQuery技术:jquery图像分页

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

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

HTML

                
 Prev Next 

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

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

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

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