一个js问题
请大牛帮忙写段小代码， 功能就跟 fm. baidu .com一样 大家可以看一下那效果， 就是 播放过的歌曲会出现在左边， 然后你点击它就可以再播放一次， 播放完后继续下一首， 我就是想要这样的循环功能，
我自己是这个构架这个逻辑的 下边给个我模拟的图，
右边是列表， 中间是正在播放的， 左边是刚播放过的。
图帧的解释：
1. 现在 显示 id_1 的内容 左边没有显示
2. 点击 前 ，id_2 到 现在 , id_1显示到左边
3. 点击 后 , id_1退回 现在 , 右边不变
4. 再点击 前 , id_1 到 左边 , id_3到 现在
如果我的解释让您头晕， 那就无视我解释的， 就是要fm .baidu的那效果， 我这还有一段基本符合的代码， 但是循环不对 您也可以直接看一下
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>expl</title><script language="javascript">var nowid=0;var maxid=5;var next;var prev;function fn1(){ nowid++; if(nowid>maxid){ nowid=1; } if(nowid<1){ nowid=maxid; } prev=nowid-1; next=nowid+1; if(next>maxid){ next=1; } if(prev<1){ prev=maxid; } document.getElementById('txt').innerHTML=document.getElementById('id_'+nowid).title; document.getElementById('prev').innerHTML=document.getElementById('id_'+prev).title; document.getElementById('next').innerHTML=document.getElementById('id_'+next).title;}function fn2(){ nowid--; if(nowid>maxid){ nowid=1; } if(nowid<1){ nowid=maxid; } prev=nowid-1; next=nowid+2; if(next>maxid){ next=1; } if(prev<1){ prev=maxid; } document.getElementById('txt').innerHTML=document.getElementById('id_'+nowid).title; document.getElementById('prev').innerHTML=document.getElementById('id_'+prev).title; document.getElementById('next').innerHTML=document.getElementById('id_'+next).title;}window.onload=(function(){fn1();});</script> </head> <body><div><a title="这是1" id="id_1">这是1</a><br><a title="这是2" id="id_2">这是2</a><br><a title="这是3" id="id_3">这是3</a><br><a title="这是4" id="id_4">这是4</a><br><a title="这是5" id="id_5">这是5</a><br></div><br><br><br><style>.go{padding:5px;border:solid 1px;}</style><span id="prev" class='go'>前</span><span id="txt" class='go'>现</span><span id="next" class='go'>后</span><br><br><input value="后" type='button' onclick='fn2();' /><input value="前" type='button' onclick='fn1();' /> </body></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=UTF-8" /> <title>expl</title> </head> <body><div id="musiclist"style="width:150px;height:auto;float:left;"><a title="这是1" id="id_1">这是1</a><br><a title="这是2" id="id_2">这是2</a><br><a title="这是3" id="id_3">这是3</a><br><a title="这是4" id="id_4">这是4</a><br><a title="这是5" id="id_5">这是5</a><br></div><br><br><br><style>.go{padding:5px;border:solid 1px;}</style>历史列表：<span id="histroy" class='go' style="cursor:pointer;">无历史记录</span>当前播放：<span id="now" class='go'>当前播放</span><br><br><input value="上一首" type='button' id="prev" onclick="play2('prev');" /><input value="下一首" type='button' onclick="play2('next');" /><script type="text/javascript" language="javascript">var count=document.getElementById("musiclist").getElementsByTagName("a").length;var o=document.getElementById("musiclist").getElementsByTagName("a");var nowid=0;var historyid=0;var playstatus;var ajax=0;function listbind(){ for(i=0;i<o.length;i++) { o[i].onclick = (function(i){ return function(){ play(i+1,1); } })(i); } document.getElementById("prev").disabled="disabled";}function play(index,t){ if(t==1){nowid=index} var musicname=t==1?o[nowid-1].innerHTML:o[index].innerHTML; if((nowid>1 || historyid>0) && t==1){ historyid=nowid==1?count-1:nowid-2; historyid=(playstatus=='prev' && historyid==count-1)?0:historyid; //只有当播放过一首以后才有播放历史 document.getElementById("histroy").innerHTML=o[historyid].innerHTML; document.getElementById("histroy").onclick=function (){play(historyid,2)} //只有当播放过一首以后上一首按钮才可操作 document.getElementById("prev").disabled=""; } if(histroy==count){document.getElementById("histroy").innerHTML="";} document.getElementById("now").innerHTML=musicname;}function play2(t){ playstatus=t; switch(t){ case 'next': if(nowid==count){ if(ajax==1){ alert('当前是最后一首了，执行你的ajax重新获取列表') }else{ play(1,1) } }else{ play(parseInt(nowid+1),1);//播放下一首 } break; case 'prev': if(nowid==1){ play(1,1);//当前是第一首时，点上一首则直接重新播放当前 }else{ play(parseInt(nowid-1),1);//播放上一首 } break; }}listbind();play(1,1)</script> </body></html>
[解决办法]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>expl</title>
<style type="text/css" >
html,body{ font:normal 13px Arial, Helvetica, sans-serif; color:#333;}
span{ display:inline-block; width:100px; height:34px; line-height:34px; border:1px solid #CCC; text-align:center; background:#F5F5F5;}
</style>
</head>
<body>
<div>
<a title="这是1" id="id_1">这是1</a><br>
<a title="这是2" id="id_2">这是2</a><br>
<a title="这是3" id="id_3">这是3</a><br>
<a title="这是4" id="id_4">这是4</a><br>
<a title="这是5" id="id_5">这是5</a><br>
</div>
<br><br>
<br>
<span id="ptxt" class='go'>前</span>
<span id="ctxt" class='go'>现</span>
<br>
<br>
<input value="后" type='button' id="prev" /><input value="前" type='button' id="next"/>
<script type="text/javascript" >
var prevCache=-1, //prev index cache
index=0, //data index,you may use database.Here we assume that the text in the a tag is we need;
currentIndex=index,
data=document.getElementsByTagName("a"), //assume data
len=data.length;
function $(id){
return document.getElementById(id);
}
function show(cIndex,pIndex){
$("ctxt").innerHTML=data[cIndex].innerHTML;
currentIndex=cIndex;
if(pIndex!==undefined){
$("ptxt").innerHTML=data[pIndex].innerHTML;
}
else{
$("ptxt").innerHTML=" ";
}
//$("ntxt").innerHTML=data[(currentIndex-1)%len].innerHTML;
}
function prev(){
//index++;
//index%=len;
if(prevCache==-1){
return;
}
show(prevCache);
prevCache=-1;
}
function next(){
prevCache=currentIndex;
index++;
index%=len;
show(index,prevCache);
}
$("prev").onclick=prev;
$("next").onclick=next;
show(index);
</script>
</body>
</html>