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>

js访3d上下轮播图的更多相关文章

  1. 带锁的3D切割轮播图

    3D切割轮播图. 加入锁,限制点击太快次数 <!DOCTYPE html><html><head lang="en"> <meta cha ...

  2. css3实现3D切割轮播图案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 案例:3D切割轮播图

    一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...

  4. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  5. CSS3,3D效果轮播图

    ---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...

  6. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  7. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  8. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  9. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

随机推荐

  1. cocos2d-x教程3：用php或DOS批处理命令来转换文件和解压缩zip

    在cocos2d-x使用中,须要不停的转换文件和压缩或解压文件.假设全人工来做,太麻烦了,且easy出错. 我如今把一些用的到批处理贴出来,供大家使用 自己主动把dat文件按数字排序重命名gz.DOS ...

  2. springboot中的日志配置

    日志方式:每天日志存放在一个文件中,info和warn日志存放一个文件,error存放一个文件 创建文件 logback-spring.xml <?xml version="1.0&q ...

  3. C++(STL)&&树-堆结构练习——合并果子之哈夫曼树

    题目题解:http://blog.csdn.net/xu12110501127/article/details/9199335 有关博客:http://www.360doc.com/content/1 ...

  4. PAT 1054 The Dominant Color[简单][运行超时的问题]

    1054 The Dominant Color (20)(20 分) Behind the scenes in the computer's memory, color is always talke ...

  5. JDK eclipse selenium 安装以及环境变量的配置

    原文地址https://www.cnblogs.com/zmhsoup/p/5249663.html [自动化学习笔记]_环境搭建Selenium2+Eclipse+Java+TestNG_(一) 目 ...

  6. Java之构造器和构造方法的使用和意义

    我总是要把构造器和方法混淆,后来发现, 方法,实际上,是需要用于执行java代码的,而构造器, 构造器,,,是一个类的实例!!(我的理解,构造器是一个对象) 为什么呢? 类的实例,我们需要用类来创建对 ...

  7. 面试官说：说一说CommonJs的实现原理

    其实刚看到这个题目的时候,我的内心是拒绝的,但是本着对科学的敬畏精神,我开始了 CommonJs 的探索之路. 来来来奉上我这几天的心血,拿走不客气.如有错误欢迎指正,共同进步. 提到CommonJs ...

  8. 倒计时60s

  9. 20154312 曾林 EXP6 信息搜集与漏洞扫描

    目录 1.实验后回答问题 2.实验总结与体会 3.实践过程记录 --3.1.信息收集 ----3.1.1.whois查询 ----3.1.2.nslookup,dig查询 ----3.1.3.trac ...

  10. CPU负载过高异常排查实践与总结

    昨天下午突然收到运维邮件报警,显示数据平台服务器cpu利用率达到了98.94%,而且最近一段时间一直持续在70%以上,看起来像是硬件资源到瓶颈需要扩容了,但仔细思考就会发现咱们的业务系统并不是一个高并 ...