js访3d上下轮播图

最新推荐文章于 2024-07-10 18:00:00 发布

dgce32897

最新推荐文章于 2024-07-10 18:00:00 发布

阅读量239

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/daysme/p/6366162.html

版权

js/css访3d上下轮播图

js访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>

转载于:https://www.cnblogs.com/daysme/p/6366162.html

dgce32897

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js访3d上下轮播图

js/css访3d上下轮播图(附件)<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css">...
复制链接

扫一扫