[javascript]一段焦点图的js代码

浏览数：20 / 时间：2015年06月08日

 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>