阅读:2382回复:2

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

楼主#
更多 发布于:2021-08-05 16:29
海洋CMS的播放列表没有分页功能,可以使用JS来实现分页显示的效果。
效果演示:(简单演示,无美化)

图片:QQ截图20210805162642.png





实现教程:(下载附件代码查看)



<script src="https://cdn.bootcdn.net/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="#" onClick="change(--pageno)">上一页</a> ';
 pageContent +='<a href="#" onClick="change(++pageno)">下一页</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>
附件名称/大小 下载次数 最后更新
实例代码.txt (2KB)  19 2021-08-05 16:42
1楼#
发布于:2021-08-05 21:07
感谢分享!
2楼#
发布于:2022-10-17 23:49
游客

返回顶部