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>