js实现翻页效果

最新推荐文章于 2024-08-04 16:33:59 发布

caiyl1314

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量4.1k

点赞数

分类专栏： jquery 文章标签： js jquery javascript 分页

本文链接：https://blog.csdn.net/cai7095576/article/details/20295111

版权

jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

js实现翻页效果

转自：http://blog.csdn.net/redeagle_gbf/article/details/20044199

<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">  
    <title>分页</title>  
    <style>  
    @charset "utf-8";  
    * {margin:0px;padding:0px;border:0px;list-style-type:none;font-size:12px;font-family:arial, "Microsoft Yahei", "宋体";}  
    .pages {text-align:center;width:100%;margin:20px auto;padding-top:20px;height:26px;overflow:hidden;}  
    .pages a {padding:5px;border:1px solid #CCC;margin:0px 5px;text-decoration:none;color:#333;}  
    .pages a:hover {border:1px solid #FC0;color:#F60;}  
    .pages .this {border:1px solid #FC0;color:#F60;}  
    </style>  
      
    <script type="text/javascript" src="jquery-1.6.4.js"></script>
    <script type="text/javascript">     
    pageShow(1,11);  
    //dbPage     当前页  
    //totalPages 总页数  
    function pageShow(dbPage,totalPages)   
    {  
        $(function()   
        {  
            //page分割数量  
            var pageFor = 11;  
            var pageSlipt = parseInt(pageFor / 2);  
            var pageHTML = new Array;  
            if (dbPage > 1) //如果当前页大于1，则显示上一页  
            {     
                var dbPagePre = dbPage-1;  
                pageHTML += "<a href=\"javascript:pageShow('"+ (dbPagePre) +"','"+totalPages+"');\"><上一页</a>";  
            }  
              
            if (totalPages > pageFor)    //如果总页数大于分割页数  
            {                     
                if(dbPage <= pageSlipt+1)  
                {  
                    for (i=1;i<=pageFor;i++)   
                    {  
                    if (i == dbPage)   
                    {  
                        pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\" class=\"this\">" +i+ "</a>";  
                    }  
                    else  
                    {  
                        pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\">" +i+ "</a>";  
                    }  
                }  
            }  
            else if (dbPage > totalPages-pageSlipt)  
            {  
                for (i=totalPages-pageFor+1; i<=totalPages; i++)   
                {  
                    if (i == dbPage)   
                    {  
                        pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\" class=\"this\">" +i+ "</a>";  
                    }  
                    else  
                    {  
                        pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\">" +i+ "</a>";  
                    }  
                }  
            }  
            else  
            {  
                for (i=dbPage-pageSlipt; i<=parseInt(dbPage)+parseInt(pageSlipt); i++)   
                {  
                    if (i == dbPage)   
                    {  
                        pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\" class=\"this\">" +i+ "</a>";  
                    }  
                    else  
                    {  
                        pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\">" +i+ "</a>";  
                    }  
                }  
            }  
            }  
            else  
            {  
                for (i=1; i<=totalPages; i++)   
                {  
                    if (i == dbPage)   
                    {  
                        pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\" class=\"this\">" +i+ "</a>";  
                    }  
                    else  
                    {  
                        pageHTML += "<a href=\"javascript:pageShow('"+ i +"','"+totalPages+"' );\">" +i+ "</a>";  
                    }  
                }  
            }  
  
            if (parseInt(dbPage)<parseInt(totalPages))   //如果当前页小于总页数，则显示下一页  
            {  
                var dbPageNext = parseInt(dbPage)+1;  
                pageHTML += "<a href=\"javascript:pageShow('"+ dbPageNext +"','"+totalPages+"');\">下一页></a>";  
            }  
              
            $(".pages").html(pageHTML);  
        });  
    }  
    </script>  
      
</head>  
<body>  
    <div class="pages"></div>  
</body>  
</html>

效果：

caiyl1314

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js实现翻页效果

js实现翻页效果转自：http://blog.csdn.net/redeagle_gbf/article/details/20044199 分页 @charset "utf-8"; * {margin:0px;padding:0px;border:0px;list-style-type:none;font-size:12
复制链接

扫一扫

专栏目录