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>
