<!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>顺序显示层-www.flyso.cn</title>
< style type="text/css">
#container{
position:absolute;
border:1px solid #666;
padding:10px;
}
#container li{
display:none;
list-style:none;
float:left;
margin:1px;
padding:20px;
width:80px;
height:80px;
border:3px #ccc double;
background:#eee;
font:30px Verdana, Arial, Helvetica, sans-serif;
color:#666;
}
#container .orderly-change{
border:3px #666 double;
background:#ccc;
}
< /style>
< /head>
< body>
< ul id="container">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
< /ul>
< script type="text/javascript">
var i=0,j
function orderly_show(){
var container_li=document.getElementById("container").getElementsByTagName("li");
if(i<container_li.length){
container_li[i].style.display="block";
if(j<container_li.length){
container_li[j].className="orderly-change";
}
i++;
j=i-1;
}
else if(i=container_li.length){
container_li[j].className="orderly-change";
}
setTimeout("orderly_show()",500);
}
orderly_show();
< /script>
< /body>
< /html>