焦点切换

最新推荐文章于 2024-10-24 10:16:40 发布

转载最新推荐文章于 2024-10-24 10:16:40 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sirzxj/archive/2011/08/13/2174069.html

文章标签：

#javascript #ViewUI

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 <head>
 5     <title></title>
 6     <style type="text/css">
 7         *{margin:0;padding:0;}
 8         ul,li{list-style-type:none;}
 9         #ul{height:50px; margin:200px;}
10         #ul li
11         {
12             width:50px;
13             float:left;
14             background:blue;          
15             height:48px;
16             margin-left:10px;
17          }
18     </style>
19     <script type="text/javascript">
20         onload = function () {
21             var current = 0;
22             var ul = document.getElementById("ul");
23             var lis = ul.getElementsByTagName("li");
24             var len = lis.length;
25             for (var j = 0; j < len; j++) {
26                 //这里用了一个闭包
27                 (function (k) {
28                     lis[k].onmouseover = function () {                       
29                         time = window.clearInterval(time);
30                         current = k;
31                         time = window.setInterval(play, 1000);
32                     }
33                 })(j);
34             }
35             function play() {
36                 current %= len;
37                 for (var i = 0; i < lis.length; i++) {
38                     lis[i].style.background = "blue";
39                 }
40                 lis[current].style.background = "black";
41                 current++;
42             }
43             var time = window.setInterval(play, 1000);
44         };
45     </script>
46 </head>
47 <body>
48 
49     <ul id="ul">
50         <li></li>
51         <li></li>
52         <li></li>
53         <li></li>
54         <li></li>
55         <li></li>
56         <li></li>
57         <li></li>
58         <li></li>
59     </ul>
60 </body>
61 </html>