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="'+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>