一个js有关问题
日期：2014-05-16 浏览次数：20521 次
一个js问题
请大牛帮忙写段小代码， 功能就跟 fm. baidu .com一样 大家可以看一下那效果， 就是 播放过的歌曲会出现在左边， 然后你点击它就可以再播放一次， 播放完后继续下一首， 我就是想要这样的循环功能，
我自己是这个构架这个逻辑的 下边给个我模拟的图，
右边是列表， 中间是正在播放的， 左边是刚播放过的。
图帧的解释：
1. 现在 显示 id_1 的内容 左边没有显示
2. 点击 前 ，id_2 到 现在 , id_1显示到左边
3. 点击 后 , id_1退回 现在 , 右边不变
4. 再点击 前 , id_1 到 左边 , id_3到 现在
如果我的解释让您头晕， 那就无视我解释的， 就是要fm .baidu的那效果， 我这还有一段基本符合的代码， 但是循环不对 您也可以直接看一下
这个代码就是点击 后 再点 前 计算的不对。
麻烦高手帮帮忙， 万分感谢! 因为我现在就差这一个功能了
------解决方案--------------------
请大牛帮忙写段小代码， 功能就跟 fm. baidu .com一样 大家可以看一下那效果， 就是 播放过的歌曲会出现在左边， 然后你点击它就可以再播放一次， 播放完后继续下一首， 我就是想要这样的循环功能，
我自己是这个构架这个逻辑的 下边给个我模拟的图，
右边是列表， 中间是正在播放的， 左边是刚播放过的。
图帧的解释：
1. 现在 显示 id_1 的内容 左边没有显示
2. 点击 前 ，id_2 到 现在 , id_1显示到左边
3. 点击 后 , id_1退回 现在 , 右边不变
4. 再点击 前 , id_1 到 左边 , id_3到 现在
如果我的解释让您头晕， 那就无视我解释的， 就是要fm .baidu的那效果， 我这还有一段基本符合的代码， 但是循环不对 您也可以直接看一下
- HTML code
<!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>
这个代码就是点击 后 再点 前 计算的不对。
麻烦高手帮帮忙， 万分感谢! 因为我现在就差这一个功能了
------解决方案--------------------
- HTML code
<!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>
.
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
