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. [py]str list切片-去除字符串首尾空格-递归思想

    取出arr的前几项 #方法1 print([arr[0], arr[1]]) #方法2 arr2 = [] for i in range(2): arr2.append(arr[i]) print(a ...

  2. spring boot整合JWT例子

    application.properties jwt.expire_time=3600000 jwt.secret=MDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjY34DFDSS ...

  3. 怎么申请 bing api key

    1:打开网址 https://login.live.com/ 注册帐号并登录(点击上图中的登录按钮即可),在新窗口点击下方的“立即注册”(有帐号的可以直接登录) 2:填写相关信息(推荐使用hotmai ...

  4. soft nofile

    原创文章,转载请注明出处:http://jameswxx.iteye.com/blog/2096461 写这个文章是为了以正视听,网上的文章人云亦云到简直令人发指.到底最大文件数被什么限制了?too ...

  5. python+requests接口自动化完整项目设计源码（一）

    原文地址https://www.cnblogs.com/yoyoketang/tag/python接口自动化/ 原文地址https://www.cnblogs.com/yoyoketang/ 原文地址 ...

  6. Java中将xml文件转化为json的两种方式

    原文地址https://blog.csdn.net/a532672728/article/details/76312475 最近有个需求,要将xml转json之后存储在redis中,找来找去发现整体来 ...

  7. java 事件通告写法

    使用场景: 自己模块发生变化后可能引起其他模块变化的部分,需要添加事件通告,通知其他模块. 使用模式: 观察者模式 (以User类为例)写法: 1.创建接口: public interface IUs ...

  8. ORTP编译为静态库的问题

    项目中需要用到ORTP,我采用的编译环境是 VC2013,当我在项目设置中将设置为静态库是,发现没有导出函数,比如在需要连接 oRTP.lib库时提示 找不到 ORTP_init; 解决办法是 :在O ...

  9. linux基础命令---touch

    touch 将文件的访问时间和修改时间修改为当前时间.如果指定的文件不存在,那么将会创造空文件,除非指定-c或-h选项.文件参数字符串‘-‘被专门处理,并导致touch更改与标准输出相关联的文件的时间 ...

  10. 在 Linux 中使用超级用户权限

    在你想要使用超级权限临时运行一条命令时,sudo 命令非常方便,但是当它不能如你期望的工作时,你也会遇到一些麻烦.比如说你想在某些日志文件结尾添加一些重要的信息,你可能会尝试这样做: $ echo & ...