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

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

[复制链接]
查看202 | 回复0 | 2024-9-1 00:31:43 | 显示全部楼层 |阅读模式
海洋CMS的播放列表没有分页功能,可以使用JS来实现分页显示的效果。
效果演示:(简单演示,无美化)
1_MUWKB4ZD8PQHDEJ.png
实现教程:(下载附件代码查看)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<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>


回复

使用道具 举报

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

本版积分规则