下面的是关于较为简单的图片进行分页展示。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="file:///C|/Users/Administrator/Desktop/jquery-2.1.1.min.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { var $pic=$('.img a'); var length=$pic.length; $pic.hide(); var next=$pic.eq(0); next.show(); var pagenumbers=$('<div class="pagenumbers"></div>'); for(i=0;i<length;i++){ $('<span class="page">'+(i+1)+'</span>').appendTo(pagenumbers); } pagenumbers.insertBefore(next); $('span').click(function(event){ $pic.hide(); next=$pic.eq($(this).text()-1); next.show(); }); }); </script> <style type="text/css"> .img{ width:550px; margin:0 auto; margin-top:70px; } .page:hover{ opacity:0.9; background-color:yellow; cursor:pointer; } .page{ display:inline-block; opacity:0.5; width:20px; height:20px; background-color:#CCC; border-radius:10px; text-align:center; margin:5px 5px; } </style> </head> <body> <div class="img"> <a href="#"><img src="1.png" width="500px" height="500px" /></a> <a href="#"><img src="2.png" width="500px" height="500px" /></a> <a href="#"><img src="3.png" width="500px" height="500px" /></a> <a href="#"><img src="4.png" width="500px" height="500px" /></a> <a href="#"><img src="5.png" width="500px" height="500px" /></a> </div> </body></html>
运行的结果截图：
