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. 多作者wordpress博客彻底屏蔽可视化编辑

    如果你的wordpress博客支持多作者,但是难免有些作者会加入过多的链接,怎么办呢?可以考虑屏蔽可视化编辑 在 functions.php 添加如下代码即可: add_filter('user_ca ...

  2. [py][mx]django课程页显示city和机构封面图

    city和课程机构信息展示到前台去 organization/views.py from django.views.generic.base import View from organization ...

  3. Keepalived安装后出现的问题总结

    1. 在配好主从备份之后,发现虚拟IP能ping通,但是访问虚拟IP对应机器上的服务(不是apache或者mysql之类的公用软件)却不成功,这是因为要访问的服务绑定了主机上的一个实体IP不是INAD ...

  4. 机器学习理论基础学习10--- 高斯混合模型GMM

    一.什么是高斯混合模型? 高斯混合模型(Gaussian Mixed Model)指的是多个高斯分布函数的线性组合,理论上GMM可以拟合出任意类型的分布,通常用于解决同一集合下的数据包含多个不同的分布 ...

  5. python中 staticmethod与classmethod

    原文地址https://blog.csdn.net/youngbit007/article/details/68957848 原文地址https://blog.csdn.net/weixin_3565 ...

  6. UBUNTU16.04 使用APT-GET如何设置代理

    sudo apt-get   install software-name -o Acquire::http::proxy="http://用户名:密码@代理服务器IP:代理服务器端口&quo ...

  7. html5shiv.min.js

    今日看代码,发现了绝妙的一句,把它记录下来. <!--[if IE]> <script src="http://libs.useso.com/js/html5shiv/3. ...

  8. 十图详解tensorflow数据读取机制

    在学习tensorflow的过程中,有很多小伙伴反映读取数据这一块很难理解.确实这一块官方的教程比较简略,网上也找不到什么合适的学习材料.今天这篇文章就以图片的形式,用最简单的语言,为大家详细解释一下 ...

  9. 跑道标识和那些复杂的灯光系统 and 简介、编号、参数、标志及数量 and 飞机跑道标准与参数

    http://www.360doc.com/content/16/0616/12/32670666_568219786.shtml http://news.carnoc.com/list/365/36 ...

  10. [转]Mac Appium环境安装

    原文:https://blog.csdn.net/dongqiushan/article/details/53326518 1.安装JDK; 2.安装Android SDK; 3.安装brew; 4. ...