1 <html> 2 <head> 3 <meta name="name" content="content"charset="utf-8"/> 4 <style type="text/css" media="screen"> 5 #main{ width: 800px;height: 300px;margin: 0 auto;position: relative;} 6 #main .list{z-index: 10;} 7 #main .list li{position: absolute;width: 800px;height: 300px;background: #ccc;list-style: none} 8 #main .bt{ z-index: 200;position: absolute;bottom: 10px;right: 10px;} 9 #main .bt li{list-style: none;float: left;width: 40px;height: 40px;border: 1px solid #ccc;text-align: center;line-height: 40px;} 10 #main .bt li:hover{background:#ccc} 11 </style> 12 <script type="text/javascript" src="move.js"></script> 13 <script type="text/javascript"> 14 window.onload=function () { 15 var bt=document.getElementsByTagName('ul')[1]; 16 var btli=bt.getElementsByTagName('li'); 17 var list=document.getElementsByTagName('ul')[0]; 18 var lis=list.getElementsByTagName('li'); 19 var index=5; 20 lis[0].style.zIndex=index; 21 for (var i = 0; i < btli.length; i++) { 22 btli[i].index=i; 23 btli[i].onmouseover=function () { 24 lis[this.index].style.zIndex=index; 25 index++; 26 } 27 btli[i].onmouseout=function () { 28 lis[0].style.zIndex=index; 29 index++; 30 } 31 32 }; 33 } 34 </script> 35 <title></title> 36 </head> 37 <body> 38 <div id="main"> 39 <ul class="list"> 40 <li style="background: #f00;"></li> 41 <li style="background: #ff0"></li> 42 <li style="background: #f0f"> </li> 43 <li style="background: #fcc"></li> 44 </ul> 45 <div class="bt"> 46 <ul> 47 <li>1</li> 48 <li>2</li> 49 <li>3</li> 50 <li>4</li> 51 </ul> 52 </div><!-- / --> 53 54 </div> 55 </body> 56 </html>
闲着没事写的一段javascript代码。