1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 *{
8 margin:0;
9 padding:0;
10 }
11 div{
12 width:1000px;
13 height: 330px;
14 margin:0 auto;
15 position: relative;
16 }
17 p{
18 width:1000px;
19 height:30px;
20 background: rgba(0,0,0,.8);
21 text-align: center;
22 position: absolute;
23 bottom: 0;
24 left:0;
25 }
26 a{
27 width:30px;
28 height: 30px;
29 border-radius: 15px;
30 background: #fff;
31 color: red;
32 text-decoration: none;
33 line-height: 30px;
34 display: inline-block;
35 }
36 </style>
37 <script type="text/javascript">
38 window.onload=function () {
39 //获取img标签
40 var imgs = document.getElementsByTagName("img")[0];
41 var as = document.getElementsByTagName("a");
42 var t = null;
43 //定时器
44 num=1;
45 function change() {
46 imgs.src = "images/demo" + num + ".jpg";
47 for (var i = 0; i < as.length; i++) {
48 as[i].style.background = "#fff";
49 as[i].style.color = "red";
50 }
51 as[num - 1].style.background = "yellow";
52 as[num - 1].style.color = "#FFF";
53 num++;
54 if (num > 6) {
55 num = 1;
56 }
57 }
58 //定时
59 t = setInterval(change,1000);
60 for (var i = 0; i < as.length; i++) {
61 as[i].currentIndex=i;
62 as[i].onmouseover=function (e) {
63 clearInterval(t);
64 var event = e || window.event;
65 var src = event.target|| event.srcElement;
66 show(src.currentIndex);
67 };
68 as[i].onmouseout=function (e) {
69 num = e.target.currentIndex+1;
70 imgs.src = "images/demo"+num+".jpg";
71 t = setInterval(change,1000)
72 };
73 }
74 function show(obj) {
75 imgs.src = "images/demo"+(obj+1)+".jpg";
76 for (var i = 0; i < as.length; i++) {
77 as[i].style.background="#fff";
78 as[i].style.color="red";
79 }
80 as[obj].style.background="yellow";
81 as[obj].style.color="#FFF";
82 }
83 }
84
85 </script>
86 </head>
87 <body>
88 <div>
89 <img src="images/demo1.jpg"/>
90 <p>
91 <a href="#">1</a>
92 <a href="#">2</a>
93 <a href="#">3</a>
94 <a href="#">4</a>
95 <a href="#">5</a>
96 <a href="#">6</a>
97 </p>
98 </div>
99 </body>
100 </html>
