<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js-图片旋转</title> <style type="text/css"> *{ margin:0; padding:0} #box{ position: relative; width:552px; height:200px; border:1px solid #999; margin:100px; background:#666666} #box img{ width:150px; height:200px} #bg {width:100%; height:100%; position:absolute; left:0; top:0; filter:alpha(opacity:60); opacity:0.6; background:black; z-index:1000;} #prog {width:324px; height:40px; background:url(images/bar.png) no-repeat 0 20px; position:absolute; z-index:2000; top:50%; left:50%; margin:-20px 0 0 -162px; font-family:arial; font-size:12px; color:#fff; text-align:center;} #prog span {font-family:"宋体";} .btn1,.btn2{ z-index:800; position:absolute;width:50px; height:30px; line-height:30px} .btn1{ top:80px; right:60px; } .btn2{ top:80px; left:60px} #bar {width:0%; height:16px; background:url(images/bar_line.gif) repeat-x; overflow:hidden; position:absolute; bottom:2px; left:2px;} .div1{ position:absolute; top:0px; left:0px; width:150px; height:200px; background:#0033CC; opacity:0.1; z-index:10} .div2{ position:absolute; top:0px; left:100px; width:150px;height:200px; background: #000;opacity:0.3; z-index:50} .div3{ position:absolute; top:0px; left:200px; width:150px; height:200px;background: #F90;opacity:1; z-index:100} .div4{ position:absolute; top:0px; left:300px; width:150px;height:200px; background: #60C;opacity:0.3; z-index:50} .div5{ position:absolute; top:0px; left:400px; width:150px; height:200px;background: #F90;opacity:0.1; z-index:10} </style> </head> <body> <div id="box"> <div id="bg"></div> <div id="prog"> 图片载入中......<span>0%</span> <div id="bar"></div> </div> <div id="btnBox"><button class="btn1">前一张</button><button class="btn2">后一张</button></div> <div id="zbox"> <div class="div1"><img src="" width="150" height="200" /></div> <div class="div2"><img src="" width="150" height="200" /></div> <div class="div3"><img src="" width="150" height="200" /></div> <div class="div4"><img src="" width="150" height="200" /></div> <div class="div5"><img src="" width="150" height="200" /></div> </div> </div> <script type="text/javascript"> var aBox=document.getElementById("box"); var zBox=document.getElementById("zbox"); var oImg=zBox.getElementsByTagName("img"); var oBtn0=aBox.getElementsByTagName("button")[0]; var oBtn1=aBox.getElementsByTagName("button")[1]; var div=zBox.getElementsByTagName("div"); var oTxt=document.getElementById('prog').getElementsByTagName('span')[0]; var oBar=document.getElementById('bar'); var arr=[]; var imgsrc=[ "http://pic.desk.chinaz.com/file/201211/5/shierybizi7.jpg", "http://img7.9158.com/200709/01/11/53/200709018758949.jpg", "http://img7.9158.com/200708/10/09/18/200708103758836.jpg", "http://img.pconline.com.cn/images/photoblog/1/0/1/7/10173588/200911/7/1257560022502_mthumb.jpg", "http://ishare.iask.sina.com.cn/play.php?fileid=8156385&path=20100610_7881956_0.jpg" ]; var bBtn=true; var icenter=2; var timer=null; var iLoad=0; //图片预加载 for(var i=0;i<oImg.length;i++){ (function(i){ var Img=new Image(); Img.src=imgsrc[i]; Img.onload=function(){ oTxt.innerHTML=oBar.style.width=Math.ceil(100*iLoad/oImg.length)+'%'; Img.onload=null; oImg[i].src=this.src; iLoad+=1; if(iLoad==oImg.length){ document.getElementById('prog').style.display=document.getElementById('bg').style.display='none'; aBox.style.display="block"; imgAuto(); } } })(i) } function imgAuto(){ for(var i=0;i<div.length;i++){ arr.push([getStyle(div[i],"left"),getStyle(div[i],"top"),getStyle(div[i],"opacity"),i,getStyle(div[i],"zIndex")]); div[i].style.left=200+"px"; div[i].style.top=0+"px"; } setTimeout(function(){ for(var i=0;i<div.length;i++){ startMove(div[i],{left:parseInt(arr[i][0]),top:parseInt(arr[i][1]),opacity:arr[i][2]*100,zIndex:parseInt(arr[i][4])}); } },500); oBtn0.onclick=function(){ if(bBtn){ bBtn=false; arr.push(arr.shift()); dh(); } } oBtn1.onclick=function(){ if(bBtn){ bBtn=false; arr.unshift(arr.pop()); dh(); } } aBox.onmouseover=function(){ clearInterval(timer); } aBox.onmouseout=function(){ timer=setInterval(function(){ arr.push(arr.shift()); dh(); },3000); } timer=setInterval(function(){ arr.push(arr.shift()); dh(); },3000); for(var i=0;i<div.length;i++){ div[i].index=i; div[i].onclick=function(){ var num=arr[this.index][3]; if(num<icenter){ for(var i=0;i<icenter-num;i++){ arr.push(arr.shift()); dh(); } } if(num>icenter){ for(var i=0;i<num-icenter;i++){ arr.unshift(arr.pop()); dh(); } } } } function dh(){ for(var i=0;i<div.length;i++){ startMove(div[i],{left:parseInt(arr[i][0]),top:parseInt(arr[i][1]),opacity:arr[i][2]*100,zIndex:parseInt(arr[i][4])},function(){ bBtn=true; }); } } } function startMove(obj, json, fnEnd) { clearInterval(obj.timer); obj.timer=setInterval(function (){ var bStop=true; //假设：所有值都已经到了 for(var attr in json) { var cur=0; if(attr=='opacity') { cur=Math.round(parseFloat(getStyle(obj, attr))*100); } else { cur=parseInt(getStyle(obj, attr)); } var speed=(json[attr]-cur)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur!=json[attr]) bStop=false; if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(cur+speed)+')'; obj.style.opacity=(cur+speed)/100; } else if(attr=="zIndex"){ obj.style[attr]=cur+speed; }else { obj.style[attr]=cur+speed+'px'; } } if(bStop) { clearInterval(obj.timer); if(fnEnd)fnEnd(); } }, 30); } function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } } </script> </body> </html>
js实战之-图片旋转播放
一个不敬业的前端攻城狮