1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <style>
7 *{margin:0;padding:0;}
8 a{text-align:center;}
9 img{vertical-align:middle;}
10 ul,ol{list-style:none;}
11 table{border-collapse:collapse}
12 input,select,button,textarea{outline:none;}
13
14 #box{width:680px;height:460px;border:1px solid #333;margin:100px auto 0;position:relative;-moz-user-select:none;-webkit-user-select:none;user-select:none;}
15 #box .img-wrap{width:100%;height:100%;}
16 #box .img-wrap a{display:block;width:100%;height:100%;perspective:500px;background:url(img/1.jpg) no-repeat center center;}
17 #box .img-wrap a div{float:left;}
18 #box .ol{height:30px;position:absolute;right:10px;bottom:10px;}
19 #box .ol li{width:30px;height:30px;margin-left:10px;float:left;background:#999;border-radius:50%;cursor:pointer;}
20 #box .ol .active{background:#f60;cursor:default;}
21 #box .prev,#box .next{width:40px;height:80px;background:rgba(0,0,0,0.7);position:absolute;top:50%;margin-top:-40px;border-radius:10px;text-align:center;line-height:80px;font:30px/80px "宋体";color:#fff;cursor:pointer;}
22 #box .prev{left:5px;}
23 #box .next{right:5px;}
24 </style>
25 <script>
26 document.addEventListener('DOMContentLoaded',function(){
27 var oBox=document.getElementById('box');
28 var oImgWrap=oBox.getElementsByClassName('img-wrap')[0];
29 var aA=oImgWrap.getElementsByTagName('a')[0];
30 var aADiv=aA.getElementsByTagName('div');
31 var oOl=oBox.getElementsByClassName('ol')[0];
32 var oOlLi=oOl.getElementsByTagName('li');
33 var oPrev=oBox.getElementsByClassName('prev')[0];
34 var oNext=oBox.getElementsByClassName('next')[0];
35 var iOlLiLen=oOlLi.length;
36 var hrefArr=['#1','#2','#3','#4','#5'];//a标签的href
37 var imgArr=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg'];//图片url
38 var aAWid=aA.offsetWidth;//大图宽
39 var aAHei=aA.offsetHeight;//大图高
40 var smallWid=136;//小图宽
41 var smallHei=92;//小图高
42 var col=Math.ceil(aAWid/smallWid);//多少列
43 var row=Math.ceil(aAHei/smallHei);//多少行
44 var surplusWid=aAWid-smallWid*(col-1);//每一行最后一个的宽
45 var surplusHei=aAHei-smallHei*(row-1);//每一列最后一个的高
46 var iNow=iNow2=0;//当前图和点击后出现的图
47 var timer=0;//延时器
48 var timer2=0;//定时器
49 //初始化第一次数据
50 if(iNow!==0){
51 aA.href=hrefArr[iNow2];
52 aA.style.background='url('+imgArr[iNow2]+') no-repeat center center';
53 }
54 oOlLi[iNow2].className='active';
55 //将大图分割成若干个小图(创建若干个div)
56 var strDiv='';
57 for(var i=0;i<row;i++){
58 var newWid=smallWid;
59 var newHei=smallHei;
60 if(i==row-1)newHei=surplusHei;
61 for(var k=0;k<col;k++){
62 if(k==col-1)newWid=surplusWid;
63 strDiv+='<div style="width:'+newWid+'px;height:'+newHei+'px;background:url('+imgArr[iNow2]+') -'+k*smallWid+'px -'+i*smallHei+'px;"></div>';
64 }
65 }
66 aA.innerHTML=strDiv;
67 //转换主要函数
68 function lesgo(){
69 for(var i=0;i<aADiv.length;i++){
70 aADiv[i].style.backgroundImage='url('+imgArr[iNow]+')';
71 aADiv[i].style.transition=aADiv[i].style.OTransition=aADiv[i].style.MozTransition=aADiv[i].style.WebkitTransition='none';
72 aADiv[i].style.transform=aADiv[i].style.OTransform=aADiv[i].style.MozTransform=aADiv[i].style.WebkitTransform='none';
73 aADiv[i].style.opacity=1;
74 aADiv[i].style.visibility='visible';
75 }
76 oOlLi[iNow].className='';
77 oOlLi[iNow2].className='active';
78 aA.href=hrefArr[iNow2];
79 aA.style.backgroundImage='url('+imgArr[iNow2]+')';
80 clearTimeout(timer);
81 timer=setTimeout(function(){
82 for(var i=0;i<aADiv.length;i++){
83 aADiv[i].style.transition=aADiv[i].style.OTransition=aADiv[i].style.MozTransition=aADiv[i].style.WebkitTransition='transform 500ms,opacity 500ms,visibility 500ms';
84 aADiv[i].style.transform=aADiv[i].style.OTransform=aADiv[i].style.MozTransform=aADiv[i].style.WebkitTransform='translateZ(350px) rotate('+((Math.random()*2-1)*180)+'deg) rotateX('+((Math.random()*2-1)*180)+'deg) rotateY('+((Math.random()*2-1)*180)+'deg)';
85 aADiv[i].style.opacity=0;
86 aADiv[i].style.visibility='hidden';
87 }
88 },100);
89 iNow=iNow2;
90 }
91 //右下角按钮
92 for(var i=0;i<iOlLiLen;i++){
93 oOlLi[i].index=i;
94 oOlLi[i].addEventListener('click',function(){
95 iNow2=this.index;
96 if(iNow==iNow2)return;
97 lesgo();
98 },false);
99 }
100 //上一张按钮
101 oPrev.addEventListener('click',function(){
102 if(iOlLiLen==1)return;
103 if(iNow2==0){
104 iNow2=iOlLiLen-1;
105 }else{
106 iNow2--;
107 }
108 lesgo();
109 },false);
110 //下一张按钮
111 oNext.addEventListener('click',nextFn,false);
112 function nextFn(){
113 if(iOlLiLen==1)return;
114 if(iNow2==iOlLiLen-1){
115 iNow2=0;
116 }else{
117 iNow2++;
118 }
119 lesgo();
120 }
121 //自动播放
122 timer2=setInterval(nextFn,5000);
123 oBox.addEventListener('mouseenter',function(){
124 clearInterval(timer2);
125 },false);
126 oBox.addEventListener('mouseleave',function(){
127 timer2=setInterval(nextFn,5000);
128 },false);
129 },false);
130 </script>
131 </head>
132 <body style="overflow-x:hidden;height:1200px;">
133 <div id="box">
134 <div class="img-wrap">
135 <a href="#1"></a>
136 </div>
137 <ol class="ol">
138 <li><img src="img/1.jpg" style="display:none;"></li>
139 <li><img src="img/2.jpg" style="display:none;"></li>
140 <li><img src="img/3.jpg" style="display:none;"></li>
141 <li><img src="img/4.jpg" style="display:none;"></li>
142 <li><img src="img/5.jpg" style="display:none;"></li>
143 </ol>
144 <span class="prev"><</span>
145 <span class="next">></span>
146 </div>
147 </body>
148 </html>
