模仿百度的分页器

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
 
.aa{width: 50px;height: 50px;border: 1px solid black;margin-right:8px;display: inline-block;text-align: center;line-height: 50px }
 
.active{border: 0;border-radius:100%;background: green;color:white;font-size: 25px; }
 
 
</style>
<script src="jquery-1.12.3.min.js"></script>
</head>
<body>
 
 
<div id="cc">
<input type="button" value="上一页" id="pre">
<span class="aa">1</span>
<span class="aa">2</span>
<span class="aa">3</span>
<span class="aa">4</span>
<span class="aa">5</span>
<span class="aa">6</span>
<span class="aa">7</span>
<span class="aa">8</span>
<span class="aa">9</span>
<span class="aa">10</span>
<input type="button" value="下一页" id="next">
</div>
<script type="text/javascript">
 
$('.aa').click(function(){
    var activeNum=+$(this).html();
    if(activeNum<=5){
        for(var i=1;i<10;i++){
            $('.aa:eq('+(i-1)+')').html(i);
        }
        $('.aa:eq('+(activeNum-1)+')').addClass('active');
        $('.aa:eq('+(activeNum-1)+')').siblings('span').addClass('aa').removeClass('active');
    }
    var ac=activeNum;
    if(activeNum>=6){
        $('.aa:eq(5)').html(activeNum).addClass('active').siblings('span').addClass('aa').removeClass('active');
        for(var i=5;i>=0;i--){
            $('.aa:eq('+i+')').html(ac--); 
        }
        var bc=activeNum+1;
        for(var i=1;i<=4;i++){
            var y=5+i;
            $('.aa:eq('+y+')').html(bc++); 
        }
    }
})
 
 
$('#next').click(function(){
    var activeNum= +"10";
    if($('#cc span').hasClass('active')){
        activeNum=+$('.active').html()+1;
         
    }
    //alert(activeNum)
         
     
    //var activeNum=+$(this).html()+1;
    if(activeNum<=5){
        for(var i=1;i<10;i++){
            $('.aa:eq('+(i-1)+')').html(i);
        }
        $('.aa:eq('+(activeNum-1)+')').addClass('active');
        $('.aa:eq('+(activeNum-1)+')').siblings('span').addClass('aa').removeClass('active');
    }
    var ac=activeNum;
    if(activeNum>=6){
        $('.aa:eq(5)').html(activeNum).addClass('active').siblings('span').addClass('aa').removeClass('active');
        for(var i=5;i>=0;i--){
            $('.aa:eq('+i+')').html(ac--); 
        }
        var bc=activeNum+1;
        for(var i=1;i<=4;i++){
            var y=5+i;
            $('.aa:eq('+y+')').html(bc++); 
        }
    }
})
 
 
 
 
$('#pre').click(function(){
    var activeNum= +"1";
    if($('#cc span').hasClass('active')){
        activeNum=+$('.active').html()-1;
         
    }
    //alert(activeNum)
         
     
    //var activeNum=+$(this).html()+1;
    if(activeNum<=5){
        for(var i=1;i<10;i++){
            $('.aa:eq('+(i-1)+')').html(i);
        }
        $('.aa:eq('+(activeNum-1)+')').addClass('active');
        $('.aa:eq('+(activeNum-1)+')').siblings('span').addClass('aa').removeClass('active');
    }
    var ac=activeNum;
    if(activeNum>=6){
        $('.aa:eq(5)').html(activeNum).addClass('active').siblings('span').addClass('aa').removeClass('active');
        for(var i=5;i>=0;i--){
            $('.aa:eq('+i+')').html(ac--); 
        }
        var bc=activeNum+1;
        for(var i=1;i<=4;i++){
            var y=5+i;
            $('.aa:eq('+y+')').html(bc++); 
        }
    }
})
 
</script>
 
</body>
</html>

　　

posted @   刘浩2561179983  阅读(214)  评论(0)  编辑  收藏  举报
编辑推荐：
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
阅读排行：
· ThreeJs-16智慧城市项目（重磅以及未来发展ai）
· 软件产品开发中常见的10个问题及处理方法
· Vite CVE-2025-30208 安全漏洞
· 互联网不景气了那就玩玩嵌入式吧，用纯.NET开发并制作一个智能桌面机器人（四）：结合BotSharp
· MQ 如何保证数据一致性？
点击右上角即可分享
微信分享提示