站长资源变现入口 全国楼凤小姐姐 招商联系客服 招商联系客服 招商联系客服 招商联系客服

使用JQ实现播放列表分页显示

[复制链接]
查看113 | 回复0 | 2024-9-6 03:11:34 | 显示全部楼层 |阅读模式
海洋CMS的播放列表没有分页功能,可以使用JS来实现分页显示的效果。
<script src="https://cdn.bootcdn.com/ajax/libs/jquery/3.6.0/jquery.js"></script><script>    function getzz() {        var a = $("ul#all li");        var zz =new Array(a.length);        for(var i=0;i <a.length;i++){            zz=a.innerHTML;        }        return zz;    }    function change(e){        debugger        pageno=e;        if(e<1){            e=1;pageno=1;        }        if(e>pageall){            e=pageall;pageno=pageall;        }        $("#all").html("");        var html="";        for(var i=0;i<pagesize;i++){            html += '<li>' + zz[(e-1)*pagesize+i] +'</li>';            if(zz[(e-1)*pagesize+i+1]==null) break;        }        $("ul#all").html(html);        var ye="";        for(var j=1;j<=pageall;j++){            if(e==j){                ye=ye+"<span><a href='#' onClick='change("+j+")' style='color:#FF0000'>"+j+"</a></span> "            }else{                ye=ye+"<a href='#' onClick='change("+j+")'>"+j+"</a> "            }        }        var pageContent="";        pageContent +='第<span id=\"a2\">'+pageno+'</span>/';        pageContent +='<span id="a1">'+pageall+'</span>页';        pageContent +='<span id="a3">'+ye+'</span>';        pageContent +='<a href="#">上一页</a> ';        pageContent +='<a href="#">下一页</a> ';        $("#page").html(pageContent);    }</script><!-- 播放列表标签 开始 --><ul id="all">   <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></ul><!-- 播放列表标签 结束 --><div class="page">    <div id="page"></div></div><script>    var zz=getzz()    var pageno=1 ; //当前页    var pagesize=3; //每页多少条信息    if(zz.length%pagesize==0){        var  pageall =zz.length/pagesize ;    }else{        var  pageall =parseInt(zz.length/pagesize)+1;    }    change(1);</script>
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则