飞豹游侠
高级会员
超高级会员
UID 27267
精华
0
积分 776
帖子 1047
金钱 776 喜悦币
威望 0
人脉 0
阅读权限 50
注册 2004-3-26
来自 沈阳
状态 离线
|
轮循显示数据,并自动补位(javascript)
[php]
<!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>
<title>轮循显示数据,并自动补位</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
.cBorder {border:1px solid #000;}
.tCenter {margin:0px auto; text-align:center;}
.list {margin:5px auto;width:500px;height:50px;list-style-type:none;}
.list li{float:left;margin:5px;padding:10px;border:1px solid #000;}
</style>
</head>
<body>
<div class="cBorder" id="tab_a">
<div class="tCenter">第一组数据</div>
<ul class="list" id="tab_a_1"><li>aaa</li><li>a22</li><li>a33</li><li>a44</li><li>a55</li><li>a66</li></ul>
<ul class="list" id="tab_a_2"><li>bbb</li><li>b22</li><li>b33</li><li>b44</li><li>b55</li><li>b66</li></ul>
<ul class="list" id="tab_a_3"><li>ccc</li><li>c22</li><li>c33</li><li>c44</li><li>c55</li><li>c66</li></ul>
<ul class="list" id="tab_a_4"><li>ddd</li><li>d22</li><li>d33</li><li>d44</li><li>d55</li><li>d66</li></ul>
<ul class="list" id="tab_a_5"><li>eee</li><li>e22</li><li>d33</li><li>d33</li></ul>
</div>
<div class="cBorder" id="tab_b">
<div class="tCenter">第一组数据</div>
<ul class="list" id="tab_b_1"><li>aaa</li><li>a22</li><li>a33</li><li>a44</li><li>a55</li><li>a66</li></ul>
<ul class="list" id="tab_b_2"><li>bbb</li><li>b22</li><li>b33</li><li>b44</li><li>b55</li><li>b66</li></ul>
<ul class="list" id="tab_b_3"><li>ccc</li><li>c22</li><li>c33</li><li>c44</li><li>c55</li><li>c66</li></ul>
<ul class="list" id="tab_b_4"><li>ddd</li><li>d22</li><li>d33</li></ul>
</div>
<div class="cBorder" id="tab_c">
<div class="tCenter">第一组数据</div>
<ul class="list" id="tab_c_1"><li>aaa</li><li>a22</li><li>a33</li><li>a44</li><li>a55</li><li>a66</li></ul>
<ul class="list" id="tab_c_2"><li>bbb</li><li>b22</li><li>b33</li><li>b44</li><li>b55</li><li>b66</li></ul>
<ul class="list" id="tab_c_3"><li>ccc</li><li>c22</li><li>c33</li><li>c44</li><li>c55</li><li>c66</li></ul>
<ul class="list" id="tab_c_4"><li>ddd</li><li>d22</li><li>d33</li></ul>
</div>
<script type="text/javascript">
//<![CDATA[
/*
code by 飞豹游侠 @ 2008-7-8
Copyright
你可以自行修改此代码,希望你不要在改了一点东西后就说是你自己写的.
*/
var per_line_max_num = 6; //第行数据的最大数量
function $(id)
{
return document.getElementById(id);
}
function c(num, add_num, max_num)
{
num = num + add_num;
if (num > max_num) {
num = num - max_num;
}
return Math.abs(num);
}
// add_num 将第几行的数据显示到第一行(这里的行数是从0开始的)?
function show(tab_name, add_num)
{
max_line_num = $(tab_name).getElementsByTagName('ul').length; //每组数据的行数
if (add_num == 0 || add_num >= max_line_num) {
return;
}
var data_ary = new Array();
data_ary[0] = '';
for (var i = 1; i <= max_line_num; i++) {
data_ary[i] = $(tab_name + '_' + c(i, add_num, max_line_num)).innerHTML;
}
for (var i = 1; i <= max_line_num; i++) {
$(tab_name + '_' + i).innerHTML = data_ary[i];
}
v = max_line_num - add_num;
uli_short = $(tab_name + '_' + v);
uli_last = $(tab_name + '_' + max_line_num);
u_length = uli_short.childNodes.length;
for (var m = u_length; m < per_line_max_num; m++)
{
var oli = document.createElement("li");
oli.innerHTML = uli_last.childNodes.item(u_length).innerHTML;
uli_short.appendChild(oli);
uli_last.removeChild(uli_last.childNodes.item(u_length));
}
}
show('tab_a', 3);
show('tab_b', 1);
show('tab_c', 3);
//]]>
</script>
</body>
</html>
[/php]
 附件: 您所在的用户组无法下载或查看附件
| 
我发现我越来越菜,怎么办啊...
家长网
龙之剑,深圳民间反扒队,欢迎加入 |
|
