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. 【剑指offer】旋转数组的最小数字

    一.题目: 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个 ...

  2. 怎么获得当前点击的按钮的id名？

    <body> <input id="t1" type="button" value='fff'> <input id=" ...

  3. <span> 标签

    <span> 标签被用来组合文档中的行内元素. 如果不对 span 应用样式,那么 span 元素中的文本 与 其他文本不会有任何视觉上的差异.尽管如此,上例中的 span 元素仍然为 p ...

  4. 筛选DataTable中的数据

    DataTable dt = bll.GetTable(); //查询数据 DataTable newdt = new DataTable(); //一个新的table来保存筛选的记录 newdt = ...

  5. JVM、Java编译器和Java解释器

    作用: JVM:JVM有自己完善的硬件架构,如处理器.堆栈(Stack).寄存器等,还具有相应的指令系统(字节码就是一种指令格式).JVM屏蔽了与具体操作系统平台相关的信息,使得Java程序只需要生成 ...

  6. #C++初学记录（贪心算法#结构体#贪心算法）

    贪心算法#结构体 Problem Description "今年暑假不AC?" "是的." "那你干什么呢?" "看世界杯呀,笨蛋 ...

  7. <<Joint Deep Modeling of Users and Items Using Reviews for Recommendation>> 评论打分预测

    综述: 本文将 CNN 与 FM(Factorization Machine) 结合,基于评论文本来进行评分预测. 简介: 目前将神经网络应用推荐系统的研究工作中,有一类思路是把如CNN等神经网络作为 ...

  8. 2018-2019-2 20165209 《网络对抗技术》Exp3：免杀原理与实践

    2018-2019-2 20165209 <网络对抗技术>Exp3:免杀原理与实践 1 免杀原理与实验内容 1.1 免杀原理 一般是对恶意软件做处理,让它不被杀毒软件所检测.也是渗透测试中 ...

  9. 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图

    1. DIV + CSS 练习:太极阴阳图.  基本思路:由三个div块元素组成:  #taiji太极阴阳图底面  #yin太极阴阳图阴面小圆  #yang太极阴阳图阳面小圆  (太极阴阳图:上为阳下 ...

  10. Redis设置密码重启后失效的解决方案

    原因可能有两个: 1.只是单纯的通过命令行设置了密码,这种设置方式是临时的,当服务器重启后,密码会失效. config set requirepass yourPassword 解决方案:在redis ...