js 多张爆炸效果轮播图

最新推荐文章于 2022-09-04 23:42:36 发布
weixin_30773135
最新推荐文章于 2022-09-04 23:42:36 发布
阅读量579
点赞数
文章标签：游戏
原文链接：http://www.cnblogs.com/xuey/p/8513855.html
版权
  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">&lt;</span>
145     <span class="next">&gt;</span>
146 </div>
147 </body>
148 </html>