jquery分页特效之分页显示图片

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 7         <title>特效之分页显示图片</title>
 8         <style type="text/css">
 9             .pages {
10                 position: absolute;
11                 left: 50px;
12             }
13             .page {
14                 margin: 5px;/*页码与页码之间间距为5像素*/
15             }
16             .hover {
17                 color: blue;
18                 background-color: lightblue;
19             }
20             a {
21                 outline: none;
22                 text-decoration: none;
23             }
24             img {
25                 border: 0;
26             }
27         </style>
28         <script src="jquery-1.5.2.js" type="text/javascript">
29         </script>
30         <script type="text/javascript">
31            $(document).ready( function() {
32               var $pic = $('#images a');
33               var num = $pic.length;
34               $pic.hide();    //隐藏图片
35               var next = $pic.eq(0);//先取第一张图片
36               next.css({'position': 'absolute', 'left': 10});
37               next.show();
38               
39               //插入分页代码
40               //页码HTML
41               var $pagenums = $('<div id="pages"></div>'); //这里把页码置于div中，是因为div是块级元素，后面
42               //跟其他元素时会换行
43               for(i=0;i<num;i++) {
44                  $('<span class="page">'+(i+1)+'</span>').appendTo($pagenums);
45               }
46               $pagenums.insertBefore(next);
47               
48               //光标移动到分页数上
49               $('.page').hover(
50                  function() {
51                      $(this).addClass('hover');
52                  },
53                  function() {
54                      $(this).removeClass('hover');
55                  }
56               );
57               
58               //点击分页的时候显示图片
59               $('.page').click(function(){
60                  $pic.hide();
61                  next = $pic.eq($(this).text()-1);
62                  next.show();
63               });
64            });
65     </script>
66     </head>
67     <body>
68         <div id="images">
69             <a class="image" href="#">
70             <img src="1.jpg" width=150px height=150px/>
71             </a>
72             <a class="image" href="#">
73             <img src="2.jpg" width=150px height=150px/>
74             </a>
75             <a class="image" href="#">
76             <img src="3.jpg" width=150px height=150px/>
77             </a>
78             <a class="image" href="#">
79             <img src="4.jpg" width=150px height=150px/>
80             </a>
81             <a class="image" href="#">
82             <img src="5.jpg" width=150px height=150px/>
83             </a>
84         </div>
85     </body>
86 </html>
posted on 2017-01-21 21:02 Sharpest 阅读(674) 评论(0) 收藏举报