这款jquery分页示例载入的是一个图片的LI列表，使用jQuery技术将其分为多页显示，在分页的过程中，还加入了动画效果，使整个分页效果看上去很有专业味。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery分页</title> <style> html,body,div,ul,li,img,button{ padding:0; margin:0; } body{ background:#333; } img{ width:150px; height:150px; outline:none; margin:5px; vertical-align:middle; } #wrapBox{ width:1150px; height:630px; border:1px solid #000; background:#E7E7E7; margin:30px 0 0 65px; position:relative; } ul{ position:relative; } ul li{ width:160px; height:160px; list-style:none; position:absolute; background:#FFF; } #button{ position:absolute; left:525px; top:580px; } #button button{ width:43px; height:43px; background:url('') no-repeat 2px; cursor:pointer; color:#666; font-weight:bolder; font-size:larger; border:none; } #button button.click{ color:#A80000; } </style> <script type="text/javascript" src="https://www.jb51.net/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('li').each(function(index) { if(index < 12) { if(index % 4 == 0) $(this).css('left', 100 + 'px'); if(index % 4 == 1) $(this).css('left', 360 + 'px'); if(index % 4 == 2) $(this).css('left', 620 +'px'); if(index % 4 == 3) $(this).css('left', 880 + 'px'); if(index < 4) $(this).css('top', 30 + 'px'); if(4 <= index && index < 8) $(this).css('top', 220 + 'px'); if(8 <= index && index < 12) $(this).css('top', 410 + 'px'); } else { $(this).css({'left':500 + 'px', 'top':500 + 'px', 'opacity':0}); } }); var position = [ {left:880, top:410}, {left:620, top:410}, {left:360, top:410}, {left:100, top:410}, {left:880, top:220}, {left:620, top:220}, {left:360, top:220}, {left:100, top:220}, {left:880, top:30}, {left:620, top:30}, {left:360, top:30}, {left:100, top:30} ]; var animation = function(nStart, nEnd, _this) { var i = 1; var bStop = false; $(_this).attr('disabled', 'disabled'); (function hide() { $('li').eq(nStart - i).animate({left:500 + 'px', top:500 + 'px', opacity:0}, 'fast', function() { if(i == 12) { bStop = true; (function show() { i++; $('li').eq(nStart + nEnd - i).animate({left:position[i - 13].left + 'px', top:position[i - 13].top + 'px', opacity:1}, 'fast', function() { if(i < 24) show(); if(i == 24) $(_this).removeAttr('disabled'); }); })(); } if(!bStop) { i++; hide(); } }); })(); }; $('button:eq(0)').addClass('click').click(function() { if($(this).is('.click')) return; $(this).addClass('click').siblings().removeClass(); animation(24, 0, $(this).siblings()); }); $('button:eq(1)').click(function() { if($(this).is('.click')) return; $(this).addClass('click').siblings().removeClass(); animation(12, 24, $(this).siblings()); }); }); </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div> <ul> <li> <img src="https://www.jb51.net/images/wall_s1.jpg" /> </li> <li> <img src="https://www.jb51.net/images/wall_s1.jpg" /> </li> <li> <img src="https://www.jb51.net/images/wall_s1.jpg" /> </li> <li> <img src="https://www.jb51.net/images/wall_s1.jpg" /> </li> <li> <img src="https://www.jb51.net/images/wall_s1.jpg" /> </li> <li> <img src="https://www.jb51.net/images/wall_s1.jpg" /> </li> <li> <img src="https://www.jb51.net/images/wall_s1.jpg" /> </li> <li> <img src="https://www.jb51.net/images/wall_s1.jpg" /> </li> <li> <img src="https://www.jb51.net/images/wall_s1.jpg" /> </li> <li> <img src="https://www.jb51.net/images/wall_s1.jpg" /> </li> <li> <img src="https://www.jb51.net/images/wall_s1.jpg" /> </li> <li> <img src="https://www.jb51.net/images/wall_s1.jpg" /> </li> <li> <img src="https://www.jb51.net/images/wall_s1.jpg" /> </li> <li> <img src="https://www.jb51.net/images/wall_s1.jpg" /> </li> <li> <img src="https://www.jb51.net/images/wall_s1.jpg" /> </li> </ul> <div> <button type="button">1</button> <button type="button">2</button> </div> </div> </body> </html>