静态分页,前台分页

最新推荐文章于 2021-03-01 18:59:00 发布

nextvary

最新推荐文章于 2021-03-01 18:59:00 发布

阅读量640

点赞数 1

分类专栏： javascript 文章标签：分页静态分页前台分页

本文链接：https://blog.csdn.net/nextvary/article/details/72819026

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<div id="Pavilion">
      <li>
           <div class="news ">
            <span>1</span>
           </div>
      </li>
      <li>
           <div class="news ">
            <span>1</span>
           </div>
      </li>
      <li>
           <div class="news ">
            <span>1</span>
           </div>
      </li>
      //li 是要分页的数据,在 #Pavilion 下,编写以下代码
       <div class="page_btn clear">
             <span class="page_box">
                    <a class="prev sx">Previous</a>
                    <ul class="page" style="display:inline;">
                    </ul>
                    <a class="next sx">Next</a>
              </span>
       </div>
</div>


<script src='./create_pages.js'>
    create_pages('#Pavilion',6);//调用
</script>

下载地址:http://download.csdn.net/detail/nextvary/9851180

例子:
<!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>jquery伪分页效果</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="../create_pages.js" type="text/javascript"></script>

<style type="text/css">
    .main{width:800px;zoom:1;margin:0 auto;}
    .item{width:800px;overflow:hidden;}
    ul{padding:0;width:860px;zoom:1;}
    .clear{zoom:1;}
    .clear:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
    ul li{list-style-type:none;float:left;background:#F69;font-size:60px;text-shadow:1px 1px 3px #555;width:380px;height:200px;margin:10px 40px 10px 0;line-height:200px;text-align:center;color:#fff;}
    .page_btn{padding-top:20px;}
    .page_btn a{cursor:pointer;padding:5px;border:solid 1px #ccc;font-size:12px;}
    .page_box{float:right;}
    .num{padding:0 10px;}
    .bg{
        background: red;
    }
</style>
</head>

<body>
    <div class="main">
        <div class="item">
            <ul class="clear">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
                <li>20</li>
                <li>21</li>
                <li>22</li>
                <li>23</li>
                <li>24</li>
                <li>25</li>
                <li>26</li>
                <li>27</li>
                <li>28</li>
                <li>29</li>
                <li>30</li>
                <li>31</li>
                <li>32</li>
                <li>33</li>
            </ul>
        </div>
       <div class="page_btn clear">
             <span class="page_box">
                    <a class="prev sx">Previous</a>
                    <ul class="page" style="display:inline;">
                    </ul>
                    <a class="next sx">Next</a>
              </span>
       </div>
    </div><!--main-->
</body>
</html>
<script type="text/javascript">
    create_pages('.clear',4);


</script>

这里写图片描述

nextvary

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
静态分页,前台分页

<div id="Pavilion"> <li> <div class="news "> <span>1</span> </div> </li> <li> <div class="news "> <span>1</span> </
复制链接

扫一扫

专栏目录