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. android studio常用控件

    1.Button设置不同的样式 <?xml version="1.0" encoding="utf-8"?> <selector xmlns: ...

  2. 非受限联合体 - 现代C++新特性总结

    非受限联合体 非受限联合体:C++98中并不是所有数据类型都能够成为union的数据成员,不允许联合体拥有非POD(Plain Old Data).静态或引用类型的成员. C++11中取消了联合体对于 ...

  3. 多线程下载文件，ftp文件服务器

    1: 多线程下载文件 package com.li.multiplyThread; import org.apache.commons.lang3.exception.ExceptionUtils; ...

  4. spring的bean容器加载

    1.在单独使用的时候可以通过ClassPathXmlApplicationContext(“配置文件.xml”);来启动容器. 2.在MVC下是通过启动servlet容器,初始化DispatcherS ...

  5. 机器学习理论基础学习3.3--- Linear classification 线性分类之logistic regression（基于经验风险最小化）

    一.逻辑回归是什么? 1.逻辑回归 逻辑回归假设数据服从伯努利分布,通过极大化似然函数的方法,运用梯度下降来求解参数,来达到将数据二分类的目的. logistic回归也称为逻辑回归,与线性回归这样输出 ...

  6. Vim/Vi的使用

     Vim 是vi的加强 Gvim图形化的vim Vim/Vi简介 Vim/Vi是一个功能强大的全屏幕文本编辑器,是Linux/Unix上最常用的文本编辑器,他们 的作用是建立,编辑,显示文本文件 Vi ...

  7. http协议基础（二）请求和响应报文的构成

    http协议用于客户端和服务器之间的通信,请求访问资源的一方称为客户端,而提供资源响应的一方称为服务器端. 下面就是客户端和服务端之间简单的通信过程 PS:请求必须从客户端建立通信,服务端没收到请求之 ...

  8. MySQL创建数据表并建立主外键关系

    为mysql数据表建立主外键需要注意以下几点: 需要建立主外键关系的两个表的存储引擎必须是InnoDB. 外键列和参照列必须具有相似的数据类型,即可以隐式转换的数据类型. 外键列和参照列必须创建索引, ...

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

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

  10. Description Resource Path LocationType Java compiler level does not match the version of the instal

    从别的地方导入进来的maven项目报: Description Resource Path Location TypeJava compiler level does not match the ve ...