<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>顺序显示</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> <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> 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> <div style="display:none;"><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?de973f4fc4fc27c651135a4cd7781c2b";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div></body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
