js访3d上下轮播图
js/css访3d上下轮播图
(附件)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{margin:0;padding:0} img{border:none;vertical-align:bottom} #box{position:relative;margin:50px auto;width:800px;height:400px; } #box img{position:absolute;} #box .yun1{width:320px;height:160px;top:-160px;left:0;z-index:1;opacity:0} #box .yun2{width:320px;height:160px;top:120px;left:0px;z-index:1;opacity:0.2} #box .yun3{width:360px;height:180px;top:110px;left:100px;z-index:2;opacity:0.6} #box .yun4{width:400px;height:200px;z-index:3;top:100px;left:200px;opacity:1} #box .yun5{width:360px;height:180px;top:110px;left:340px;z-index:2;opacity:0.6} #box .yun6{width:320px;height:160px;top:120px;left:480px;z-index:1;opacity:0.2} #box .yun7{width:320px;height:160px;top:-160px;left:480px;z-index:1;opacity:0} </style> <script type="text/javascript" src="js/fengzhuanghanshu.js"></script> <script type="text/javascript" src="js/time_move.js"></script> <script type="text/javascript" src="js/Tween.js"></script> <script type="text/javascript"> window.onload=function(){ var aImg=box.getElementsByTagName("img"); var arr=['height','width','top','left','opacity','zIndex'] var arrval=[]; for(var i=0;i<aImg.length;i++){ var oarr={}; for(var j=0;j<arr.length;j++){ if(arr[j]=='opacity'){ var iCur=Math.round(getStyle(aImg[i],'opacity')*100) }else{ var iCur=parseInt(getStyle(aImg[i],arr[j])) } oarr[arr[j]]=iCur; } arrval.push(oarr) } console.log(arrval) setInterval(function(){ arrval.push(arrval.shift()) for(var i=0;i<aImg.length;i++){ startMove(aImg[i],arrval[i]) } },1000) } </script> </head> <body> <div id="box"> <a href="javascript:;"><img class="yun1" src="img/1.jpg" /> </a> <a href="javascript:;"><img class="yun2" src="img/2.jpg" /> </a> <a href="javascript:;"><img class="yun3" src="img/3.jpg" /> </a> <a href="javascript:;"><img class="yun4" src="img/4.jpg" /> </a> <a href="javascript:;"><img class="yun5" src="img/5.jpg" /> </a> <a href="javascript:;"><img class="yun6" src="img/6.jpg" /> </a> <a href="javascript:;"><img class="yun7" src="img/7.jpg" /> </a> </div> </body> </html>
