1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 *{margin: 0;padding: 0;} 8 9 #box{width: 520px;height: 350px;margin:50px auto;border: 1px solid #ccc;position: relative;} 10 #box a{position: absolute;top: 45%;z-index:2;display: block; width: 30px; height: 30px;background: #FFCC33;border-radius: 15px;} 11 #box a#prev{left: 5px;} 12 #box a#next{right: 5px;} 13 #imgBox{width: 520px; height: 280px; text-align: center;position: absolute;} 14 #list{text-align: center;position: absolute;bottom: 0; width: 520px;} 15 #list span{display:inline-block; width: 10px;height: 10px;background: #CCCCCC; border-radius: 5px; margin: 0 3px;} 16 #list span.active{background:#FFCC33;} 17 18 #imgSmall{display:none; position: absolute; width: 100px; height: 54px; border: 3px solid #ccc;} 19 #imgSmall img{width: 100px; height: 54px; } 20 </style> 21 </head> 22 <body> 23 <div id="box"> 24 <a href="#" id="prev"></a> 25 <a href="#" id="next"></a> 26 <div id="imgBox"><img src="images/loader_ico.gif"/></div> 27 <div id="list"></div> 28 <div id="imgSmall"></div> 29 </div> 30 <script type="text/javascript"> 31 var oBox=document.getElementById("box"); 32 var imgBox=document.getElementById("imgBox"); 33 var oImg=document.getElementsByTagName("img")[0]; 34 var oList=document.getElementById("list"); 35 var imgSmall=document.getElementById("imgSmall"); 36 var oPrev=document.getElementById("prev"); 37 var oNext=document.getElementById("next"); 38 39 var imgArr=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg","images/7.jpg"]; 40 var num=0; 41 var timer=null; 42 43 for(var i=0;i<imgArr.length;i++){ 44 oList.innerHTML+="<span></span>"; 45 }; 46 var aSpan=oList.getElementsByTagName("span"); 47 48 function fnTab(){ 49 oImg.src=imgArr[num]; 50 for(var i=0;i<aSpan.length;i++){ 51 aSpan[i].className=""; 52 } 53 aSpan[num].className="active"; 54 }; 55 fnTab(); 56 57 58 59 60 function autoMove(){ 61 num++; 62 if(num>imgArr.length-1){ 63 num=0; 64 } 65 fnTab(); 66 }; 67 68 function autoPrev(){ 69 num--; 70 if(num<0){ 71 num=imgArr.length-1; 72 } 73 74 fnTab() 75 }; 76 77 oPrev.onclick=autoPrev; 78 oNext.onclick=autoMove; 79 80 function start(){ 81 timer=setInterval(function(){ 82 autoMove(); 83 },2000); 84 //console.log(1); 85 }; 86 start(); 87 88 oBox.onmouseover=function(){ 89 clearInterval(timer); 90 }; 91 oBox.onmouseout=function(){ 92 start(); 93 }; 94 95 for(var i=0;i<aSpan.length;i++){ 96 aSpan[i].index=i; 97 aSpan[i].onclick=function(){ 98 num=this.index; 99 fnTab(); 100 }; 101 102 aSpan[i].onmouseover=function(){ 103 imgSmall.style.display="block"; 104 imgSmall.innerHTML=' <img src="images/'+(this.index+1)+'.jpg" />'; 105 106 var nLeft=aSpan[this.index].offsetLeft-imgSmall.offsetWidth/2; 107 var nTop=oList.offsetTop-imgSmall.offsetHeight+3; 108 109 imgSmall.style.left=nLeft+'px'; 110 imgSmall.style.top=nTop+'px'; 111 112 }; 113 aSpan[i].onmouseout=function(){ 114 imgSmall.style.display="none"; 115 }; 116 117 118 }; 119 120 </script> 121 </body> 122 </html>