想做一个剧集的js分页 类似优酷网 http://v.youku.com/v_show/id_XMTQwMTczNzQ0.html
刚才在咱们论坛找到一个js的分页,很不错,赞啊 http://topic.csdn.net/u/20081015/16/0e2d39ec-2241-419a-b079-e20426776284.html
但还不是很完美,现在开始问题:
分页是实现了,但我想实现就是当在播放某一集的时候能够识别出它在第几页,并把当前页显示为当前所播放的页次上,同优酷网,具体参看上面优酷网链接。
以提供代码为例说明,比如在播放第7集(id=kan为当前播放)的时候,第7集在第2页上,那么当打开第7集的链接时,分页默认就为 第2/3页 并显示该分页的内容,同时还要保证重置后的内容 第7页上还保留id=kan我js很菜的 就不说别的了 大佬们帮忙吧 谢谢<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>商户信息</title>
<style>
#kan a{ color:red;}
</style>
</head>
<body>
<ul id="all">
<li><a href="#">第1集</a></li>
<li><a href="#">第2集</a></li>
<li><a href="#">第3集</a></li>
<li><a href="#">第4集</a></li>
<li><a href="#">第5集</a></li>
<li><a href="#">第6集</a></li>
<li id="kan"><a href="#">第7集</a></li>
<li><a href="#">第8集</a></li>
<li><a href="#">第9集</a></li>
<li><a href="#">第10集</a></li>
<li><a href="#">第11集</a></li>
<li><a href="#">第13集</a></li>
<li><a href="#">第14集</a></li>
<li><a href="#">第15集</a></li>
</ul>
<div class="page">
第<span id="a2"></span>/<span id="a1"></span>页
<span id="a3"></span> <a href="#" onClick="change(--pageno)">上一页</a>
<a href="#" onClick="change(++pageno)">下一页</a></div>
</body>
<script>
var a = document.getElementById("all").getElementsByTagName("li");
var zz =new Array(a.length)
for(var i=0;i <a.length;i++)
{ zz[i]=a[i].innerHTML } //div的字符串数组付给zz
var pageno=1 //当前页
var pagesize=5 //每页多少条信息
if(zz.length%pagesize==0)
{var pageall =zz.length/pagesize }
else
{var pageall =parseInt(zz.length/pagesize)+1} //一共多少页 function change(e){
pageno=e;
if(e<1)//如果输入页<1页
{ e=1;pageno=1}//就等于第1页 , 当前页为1
if(e>pageall)//如果输入页大于最大页
{e=pageall;pageno=pageall}//输入页和当前页都=最大页
document.getElementById("all").innerHTML=""//全部清空
for(var i=0;i<pagesize;i++)
{
var div =document.createElement("li")//建立div对象
div.innerHTML=zz[(e-1)*pagesize+i]//建立显示元素
document.getElementById("all").appendChild(div)//加入all中
if(zz[(e-1)*pagesize+i+1]==null)//超出范围跳出
break
}
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> "}
}
document.getElementById("a1").innerHTML=pageall
document.getElementById("a2").innerHTML=pageno
document.getElementById("a3").innerHTML=ye
}
change(1)
</script>
</body>
</html>
刚才在咱们论坛找到一个js的分页,很不错,赞啊 http://topic.csdn.net/u/20081015/16/0e2d39ec-2241-419a-b079-e20426776284.html
但还不是很完美,现在开始问题:
分页是实现了,但我想实现就是当在播放某一集的时候能够识别出它在第几页,并把当前页显示为当前所播放的页次上,同优酷网,具体参看上面优酷网链接。
以提供代码为例说明,比如在播放第7集(id=kan为当前播放)的时候,第7集在第2页上,那么当打开第7集的链接时,分页默认就为 第2/3页 并显示该分页的内容,同时还要保证重置后的内容 第7页上还保留id=kan我js很菜的 就不说别的了 大佬们帮忙吧 谢谢<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>商户信息</title>
<style>
#kan a{ color:red;}
</style>
</head>
<body>
<ul id="all">
<li><a href="#">第1集</a></li>
<li><a href="#">第2集</a></li>
<li><a href="#">第3集</a></li>
<li><a href="#">第4集</a></li>
<li><a href="#">第5集</a></li>
<li><a href="#">第6集</a></li>
<li id="kan"><a href="#">第7集</a></li>
<li><a href="#">第8集</a></li>
<li><a href="#">第9集</a></li>
<li><a href="#">第10集</a></li>
<li><a href="#">第11集</a></li>
<li><a href="#">第13集</a></li>
<li><a href="#">第14集</a></li>
<li><a href="#">第15集</a></li>
</ul>
<div class="page">
第<span id="a2"></span>/<span id="a1"></span>页
<span id="a3"></span> <a href="#" onClick="change(--pageno)">上一页</a>
<a href="#" onClick="change(++pageno)">下一页</a></div>
</body>
<script>
var a = document.getElementById("all").getElementsByTagName("li");
var zz =new Array(a.length)
for(var i=0;i <a.length;i++)
{ zz[i]=a[i].innerHTML } //div的字符串数组付给zz
var pageno=1 //当前页
var pagesize=5 //每页多少条信息
if(zz.length%pagesize==0)
{var pageall =zz.length/pagesize }
else
{var pageall =parseInt(zz.length/pagesize)+1} //一共多少页 function change(e){
pageno=e;
if(e<1)//如果输入页<1页
{ e=1;pageno=1}//就等于第1页 , 当前页为1
if(e>pageall)//如果输入页大于最大页
{e=pageall;pageno=pageall}//输入页和当前页都=最大页
document.getElementById("all").innerHTML=""//全部清空
for(var i=0;i<pagesize;i++)
{
var div =document.createElement("li")//建立div对象
div.innerHTML=zz[(e-1)*pagesize+i]//建立显示元素
document.getElementById("all").appendChild(div)//加入all中
if(zz[(e-1)*pagesize+i+1]==null)//超出范围跳出
break
}
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> "}
}
document.getElementById("a1").innerHTML=pageall
document.getElementById("a2").innerHTML=pageno
document.getElementById("a3").innerHTML=ye
}
change(1)
</script>
</body>
</html>
这被程序是cms没得改的,还想实现类似的功能,就想到了这么个方法,至于可行性我觉得应该还行,不知道你是怎么想的,求详解。
调用接口page.aspx(或php、asp)随便。返回是分类数据。放到你的table里。