一个简单的仿sohu电视剧播放列表[脚本]

实例下载地址： http://download.csdn.net/source/2994263

一个简单的用javascript脚本写的仿sohu电视剧播放列表实例
可引用土豆 ku6等视频资源
加入最大化播放器控制，ESC取消最大化播放器





http://tv.sohu.com/20101228/n278548504.shtml

playList.js

/*
剧集列表显示
*/

var current = 1;

var objList = "([{id:'1',title:'第1集',url:'http://share.vrs.sohu.com/200948/v.swf'},{id:'2',title:'第2集',url:'http://share.vrs.sohu.com/201925/v.swf'},{id:'3',title:'第3集',url:'http://share.vrs.sohu.com/206873/v.swf'},{id:'4',title:'第4集',url:'http://share.vrs.sohu.com/207746/v.swf'},{id:'5',title:'第5集',url:'http://share.vrs.sohu.com/211417/v.swf'},{id:'6',title:'第6集',url:'http://share.vrs.sohu.com/212167/v.swf'},{id:'7',title:'第7集',url:'http://share.vrs.sohu.com/215562/v.swf'},{id:'8',title:'第8集',url:'http://share.vrs.sohu.com/216329/v.swf'},{id:'9',title:'第9集',url:'http://share.vrs.sohu.com/220644/v.swf'},{id:'10',title:'第10集',url:'http://share.vrs.sohu.com/221670/v.swf'},{id:'11',title:'第11集',url:'http://share.vrs.sohu.com/226549/v.swf'}])";
var arr =  eval(objList);

//显示缩略列表
function ShowSmallList(current,arr)
{
var arrId = current-1;//当前数组序号
var total = arr.length;
//列表小于10集
if(total <= 10)
{
for(i=0;i<arr.length;i++)
{
if(arrId == i) ShowPlay(arr[i].id,arr[i].title,"ptitle2");
else ShowPlay(arr[i].id,arr[i].title,"ptitle");
}
}
//列表>10集 当前播放集<8
if(total > 10 && current < 8)
{
for(i=0;i<9;i++)
{
if(i == 8){ShowBtn();}
else
{
if(arrId == i) {ShowPlay(arr[i].id,arr[i].title,'ptitle2');}
else ShowPlay(arr[i].id,arr[i].title,'ptitle');
}
}
ShowPlay(arr[total-1].id,arr[total-1].title,'ptitle');//最后集
}
//列表>10集 当前播放集>=8，当前集后面的集数<=5集
if(total > 10 && current >= 8 && (total - current <= 5))
{
ShowPlay(arr[0].id,arr[0].title,'ptitle');//第一集
ShowBtn();//缩略按钮
for(i=total-8;i<total;i++)
{
if(arrId == i) ShowPlay(arr[i].id,arr[i].title,'ptitle2');
else ShowPlay(arr[i].id,arr[i].title,'ptitle');
}
}
//列表>10集 当前播放集>=8，当前集后面的集数>5集
if(total > 10 && current >= 8 && (total - current > 5))
{
ShowPlay(arr[0].id,arr[0].title,'ptitle');//第一集
ShowBtn();//缩略按钮
for(i=current-2;i<current+4;i++)
{
if(arrId == i) ShowPlay(arr[i].id,arr[i].title,'ptitle2');
else ShowPlay(arr[i].id,arr[i].title,'ptitle');
}
ShowBtn();//缩略按钮
ShowPlay(arr[total-1].id,arr[total-1].title,'ptitle');//最后集
}
}
//显示全部列表
function ShowAll(current,arr)
{
var arrId = current-1;//当前数组序号
for(i=0;i<arr.length;i++)
{
if(arrId == i) ShowPlay(arr[i].id,arr[i].title,"ptitle2");
else ShowPlay(arr[i].id,arr[i].title,"ptitle");
}
}

//div列表内容显示
function ShowPlay(id,title,style)
{
var outStr = "<a class='" + style + "' onClick='Play(" + id + ");' style="cursor:hand" mce_style="cursor:hand"> " + title + "</a>";
document.getElementById("playList").innerHTML += outStr;
}
//显示缩略标记按钮
function ShowBtn()
{
var outStr = "<a  class='ptitle' style="cursor:hand" mce_style="cursor:hand" onClick='showList();'> ... </a>";
document.getElementById("playList").innerHTML += outStr;
}

//折叠展开列表
var showFlag=false;
function showList()
{
document.getElementById("playList").innerHTML = "";
if(!showFlag){//展开
document.getElementById("imgbtn").src="images/hide.jpg";
ShowAll(current,arr);
showFlag = true;
}
else//收起
{
document.getElementById("imgbtn").src="images/show.jpg";
ShowSmallList(current,arr);
showFlag = false;
}

}
//播放
function Play(playID)
{
for(i=0;i<arr.length;i++)
{
if(arr[i].id == playID)
{
showFlag=true;
current = playID;
document.getElementById("swfplay").src = arr[i].url;
showList();
break;
}
}
}

/*最大化播放器，ESC取消还原*/
var flag = false;
function setFull()
{
document.getElementById('swfplay').style.position ='absolute';
document.getElementById('swfplay').style.top =document.body.scrollTop;
document.getElementById('swfplay').style.left ='0px';
document.getElementById('swfplay').style.width = document.documentElement.clientWidth ;
document.getElementById('swfplay').style.height = document.documentElement.clientHeight ;
document.body.style.overflow = 'hidden';
flag = true;
}
function keyDown(){
if(event.keyCode==27 && flag){
document.body.style.overflow = 'auto';
document.getElementById('swfplay').style.position ='static';
document.getElementById('swfplay').style.width = '610px';
document.getElementById('swfplay').style.height = '440px';
flag = false;
}
}
document.onkeydown = keyDown;

css.css

.ptitle { width:60px; height:20px; padding-top:2px; overflow:hidden; background-color:#F2FAFD; border:1px dotted #CCC; text-align:center; float:left; margin-right:2px; cursor:hand; margin-top:2px; margin-bottom:5px; font-size:12px}

.ptitle2 { width:60px; height:20px;padding-top:2px;  overflow:hidden; background-color:#418DCC; color:#FFFFFF; border:1px dotted #CCC; text-align:center; float:left; margin-right:2px; cursor:hand; margin-top:2px;margin-bottom:5px;font-size:12px}
#swfplay{ margin-bottom:10px;}
#playList{width:650px; border:1px solid #ccc; padding:5px; height:auto}
#title{float:left; font-size:14px; font-weight:bold; color:#333333; padding-left:5px}
#control{float:right; padding-right:15px; cursor:hand}
#player{ width:640px; padding:10px;border:1px solid #ccc; margin-bottom:30px;}

页面play.html

<!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>
<link type="text/css" href="css.css" mce_href="css.css" rel="stylesheet" />
<mce:script type="text/javascript" src="playList.js" mce_src="playList.js"></mce:script>
</head>

<body>
<div style="width:660px">

<div id="player"><iframe name="swfplay" id="swfplay"  src=""  width="600" height="440" scrolling="no"  frameborder="0"></iframe><input type="button" value="全屏播放" style="float:right" mce_style="float:right" onClick="setFull();"></div>

<div id="title">剧集列表</div>
<div id="control" onClick="showList();"><img id="imgbtn" src="images/show.jpg" mce_src="images/show.jpg"></div>
<div id="playList"> </div>
</div>
<mce:script type="text/javascript"><!--
Play(current);
// --></mce:script>
</body>
</html>