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代码。
时间： 2024-10-13 06:13:22