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>