原生js实现带运动的分页效果

della_uii

墨衍会员 · AI 创作全网分发码龄10年

关注

VIP免费原创最新推荐文章于 2026-08-15 10:04:50 发布 2.1k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

本例最终效果如下图，当切换页码时，本页码内所有课程将从最后一个课程开始依次运动到底部中间的位置并消失，然后新页码内的课程依次从底部中间的位置运动到原始位置。
这里写图片描述

首先实现分页效果，然后将运动和分页结合。
分页效果图如下图中的③或④所示：
js分页

下面将以什么情况出现首页-什么情况出现上一页-五个页码不同排布情况-什么情况出现下一页-什么情况出现尾页-总页码提示-点击页码进行切换的思路实现该分页效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;
                margin: 0 5px;
                color: #333;
            }
            #div1{
                width: 480px;
                margin: 200px auto;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
    
    
                page({

                    id:'div1',
                    nowNum:8,  //默认为1
                    allNum:16,  //默认为5
                    callback:function(now,all){
    
      //传入两个参数：当前页和总页数
                        alert(now+'/'+all);
                    }

                })
            }

            //封装好的分页函数
            function page(opt){
    
    

                //判断调用时是否传入id，只在传入id的情况下使用该分页函数
                if (!opt.id) {
                    return false;
                }

                var obj=document.getElementById(opt.id);
                var nowNum=opt.nowNum || 1;  //当前页，默认1
                var allNum=opt.allNum || 5;  //总页码，默认5

                //看回调函数是否存在，如果存在就直接赋值，不存在则默认空
                var callback=opt.callback || function(){
    
    };

                //首页，仅在当前页大于等于4 且 总页码大于等于6的情况下出现‘首页’，图①
                if (nowNum>=4 && allNum>=6) {
                    var oA=document.createElement('a');
                    oA.href='#1';
                    oA.innerHTML='首页';
                    obj.appendChild(oA);
                }

                //上一页，在当前页大于等于2的情况下出现‘上一页’，图②
                if (nowNum>=2) {
                    var oA=document.createElement('a');
                    oA.href='#'+(nowNum-1);
                    oA.innerHTML='上一页';
                    obj.appendChild(oA);
                }

                //5个页码，分两种情况，一是总页码小于等于5，二是总页码大于5，图③和④
                if (allNum<=5) {  //总页码小于等于5

                    for (var i=1; i<=allNum; i++) {
                        var oA=document.createElement('a');
                        oA.href='#'+i;
                        if (nowNum==i) {  //当前页页码不加[]
                            oA.innerHTML=i;
                        }