一个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>这个代码就是点击 后 再点 前 计算的不对。麻烦高手帮帮忙，  万分感谢! 因为我现在就差这一个功能了

解决方案 »

  1.   

    function fn1()
    {
        nowid++;
        prev=nowid-1;
        next=nowid+1;
        if(next>maxid){
            next=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--;
        prev=nowid-1;
        next=nowid+1;
        if(next>maxid){
            next=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;
    }
      

  2.   

    看注释
    function fn2()
    {
        nowid--;
        if(nowid>maxid){
            nowid=1;
        }
        if(nowid<1){
            nowid=maxid;
        }
        prev=nowid-1;
        next=nowid+2;//这个地方应该是加1的吧 怎么加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;
    }
      

  3.   


    楼上2位，  +2是对的， 因为点左边的时候 右边的数字不变， 我是根据中间(现在)的id判断的，比如:  左边3  中间4  右边 5
    我点左边:  左边2  中间3  右边5
    那在点左边的时候我要右边的id不变  是不是根据中间的id判断就是要+2了  
    当然， 接下来就错误了， 我再点左边  :左边1  中间2  右边4
    注意， 右边就变4了  其实应该还是5 ，  就是要点击左边不影响右边    我那代码只是个演示，  其实要真正像fm. baidu .com 那样的效果，  这样判断是不科学的
      

  4.   

    fm.baidu那个很简单啊。两个变量，一个用于缓存一首歌，一个用于歌index。每次 上一首的时候，把缓存的取出来,index自已变；点下一首的时候，缓存当前的，index改变；下班了，实在不行告诉我，回去帮你搞一个。hf gl~~~
      

  5.   

    嗯，， 谢谢你~~我没学过web  所以不会  但还是用会用的写的那段代码，  知道不是那么回事 所以才来寻求帮助。。   真的谢谢你  期待你的帮助
      

  6.   

    LZ,我记得你好像之前是问过拆分js的问题，就为这个？？
      

  7.   

    <!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>
      

  8.   

    <!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="&nbsp;";
    }
    //$("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>
      

  9.   

    真专业····csdn就需要你这种人啊····
      

  10.   

    呵呵， 就是这样。。  问题解决了， 谢谢你的帮助， 也很谢谢crying_boy， 只是我没表达清楚，让帮助者费解了。    我研究下这代码然后回来结贴
      

  11.   


    OK，  研究好啦~   不过想问一下你的index%=len;这句， 怎么改成判断是到最后一个呢，我想到最后执行一个脚本，而不循环