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>
