<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>旋转木马轮播图</title>

    <link rel="stylesheet" href="css/css.css"/>

    <script src="common.js"></script>

</head>

<body>

<div class="wrap" id="wrap">

    <div class="slide" id="slide">

        <ul>

            <li><a href="#"><img src="data:images/slidepic3.jpg" alt=""/></a></li>

            <li><a href="#"><img src="data:images/slidepic1.jpg" alt=""/></a></li>

            <li><a href="#"><img src="data:images/slidepic2.jpg" alt=""/></a></li>

            <li><a href="#"><img src="data:images/slidepic4.jpg" alt=""/></a></li>

            <li><a href="#"><img src="data:images/slidepic5.jpg" alt=""/></a></li>

        </ul>

        <div class="arrow" id="arrow">

            <a href="javascript:;" class="prev" id="arrLeft"></a>

            <a href="javascript:;" class="next" id="arrRight"></a>

        </div>

    </div>

</div>

<script>

    function my$(id) {

        return document.getElementById(id);

    }

    function animate(element,json,fn) {

        clearInterval(element.timeId);

        element.timeId=setInterval(function () {

            var flag=true;//假设都达到了目标

            for(var attr in json){

                if(attr=="opacity"){//判断属性是不是opacity

                    var current= getAttrValue(element,attr)*100;

                    //每次移动多少步

                    var target=json[attr]*100;//直接赋值给一个变量,后面的代码都不用改

                    var step=(target-current)/10;//(目标-当前)/10

                    step=step>0?Math.ceil(step):Math.floor(step);

                    current=current+step;

                    element.style[attr]=current/100;

                }else if(attr=="zIndex"){//判断属性是不是zIndex

                    element.style[attr]=json[attr];

                }else{//普通的属性

                    //获取当前的位置----getAttrValue(element,attr)获取的是字符串类型

                    var current= parseInt(getAttrValue(element,attr))||0;

                    //每次移动多少步

                    var target=json[attr];//直接赋值给一个变量,后面的代码都不用改

                    var step=(target-current)/10;//(目标-当前)/10

                    step=step>0?Math.ceil(step):Math.floor(step);

                    current=current+step;

                    element.style[attr]=current+"px";

                }

                if(current!=target){

                    flag=false;//如果没到目标结果就为false

                }

            }

            if(flag){//结果为true

                clearInterval(element.timeId);

                if(fn){//如果用户传入了回调的函数

                    fn(); //就直接的调用,

                }

            }

        },10);

    }

</script>

<script>

    var config = [

        {

            width: 400,

            top: 20,

            left: 50,

            opacity: 0.2,

            zIndex: 2

        },//0

        {

            width: 600,

            top: 70,

            left: 0,

            opacity: 0.8,

            zIndex: 3

        },//1

        {

            width: 800,

            top: 100,

            left: 200,

            opacity: 1,

            zIndex: 4

        },//2

        {

            width: 600,

            top: 70,

            left: 600,

            opacity: 0.8,

            zIndex: 3

        },//3

        {

            width: 400,

            top: 20,

            left: 750,

            opacity: 0.2,

            zIndex: 2

        }//4

    ];

        var flag = true;//假设所有的动画执行完毕了---锁

        var list = my$("slide").getElementsByTagName("li");

        //1---图片散开

        function assign() {

            for (var i = 0; i < list.length; i++) {

                //设置每个li,都要把宽,层级,透明度,left,top到达指定的目标位置

                animate(list[i], config[i], function () {

                    flag = true;

                });

            }

        }

        assign();

        //右边按钮

        my$("arrRight").onclick = function () {

            if (flag) {

                flag = false;

                config.unshift(config.pop());

                assign();

            }

        };

        //左边按钮

        my$("arrLeft").onclick = function () {

            if (flag) {

                flag = false;

                config.push(config.shift());

                assign();//重新分配

            }

        };

        //鼠标进入,左右焦点的div显示

        my$("slide").onmouseover = function () {

            animate(my$("arrow"), {"opacity": 1});

        };

        //鼠标离开,左右焦点的div隐藏

        my$("slide").onmouseout = function () {

            animate(my$("arrow"), {"opacity": 0});

        };

</script>

</body>

</html>

css

@charset "UTF-8";

/*初始化  reset*/

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:;padding:}

body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}

ol,ul{list-style:none}

a{text-decoration:none}

fieldset,img{border:;vertical-align:top;}

a,input,button,select,textarea{outline:none;}

a,button{cursor:pointer;}

.wrap{

    width:1200px;

    margin:100px auto;

}

.slide {

    height:500px;

    position: relative;

}a

.slide li{

    position: absolute;

    left:200px;

    top:;

}

.slide li img{

    width:100%;

}

.arrow{

    opacity:;

}

.prev,.next{

    width:76px;

    height:112px;

    position: absolute;

    top:50%;

    margin-top:-56px;

    background: url(../images/prev.png) no-repeat;

    z-index:;

}

.next{

    right:;

    background-image: url(../images/next.png);

}

原生js 实现旋转木马的更多相关文章

  1. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  2. 原生JS实现旋转木马轮播图特效

    大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...

  3. Javascript学习记录——原生JS实现旋转木马特效

    昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...

  4. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  5. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  6. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  7. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  8. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  9. 原生js实现autocomplete插件

    在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...

随机推荐

  1. shiro 实现 网站登录记住我功能 学习记录（四）

    在很多网站都有在登录的时候,比如说记住我 几天之内  只要再此打开这个网站,都不需要再登录的情况: 1.前台JSP增加 单选框:记住我 如 2.在处理登录的 Controller 代码中增加接收这个参 ...

  2. vector的capacity增长方式

    vector的capacity()调用返回vector中最大能够存储的元素个数,也即在下一次需要扩充容量之前能容纳的元素个数.reserve会使容器在必要的时候增长,以便容纳制指定数目的元素. #in ...

  3. 1146 ID Codes

    题目链接: http://poj.org/problem?id=1146 题意: 给定一个字符串(长度不超过50), 求这个字符串的下一个字典序的字符串, 如果已经是最大字典序, 那么输出 " ...

  4. Linux软件包的管理

    RPM软件包 RPM软件包一般的安装位置(分散): 管理程序:/sbin/* /usr/sbin/* 普通用户程序:/bin/* /usr/bin/* rpm -q ===> rpm -quer ...

  5. mybatis 存储过程调用

    接口 UserInfoMapper.java xml   UserInfoMapper.xml 如何关联 <?xml version="1.0" encoding=" ...

  6. GithubPage自定义腾讯404界面

    思路来源 之前看到腾讯网络的404和github自带的404,反差很大,于是想自己弄一个了. 过程 github的404一点也不复杂,只是需要在根目录添加一个404.html的文档,或者404.md的 ...

  7. VC中_T()的作用

    Windows使用两种字符集ANSI和UNICODE, 前者就是通常使用的单字节方式,但这种方式处理象中文这样的双字节字符不方便,容易出现半个汉字的情况. 而后者是双字节方式,方便处理双字节字符. W ...

  8. 12306GT多线程、分流免费抢票工具使用心德

    大事记背景 我相信很多远游他乡的朋友每逢佳节都会遇到一个难题,就是购票难,这个难题有多难呢?经常在12306官网购票的小伙伴应该知道每个地方的放票时间是不一样的,但是逢年过节的那几天即使你在放票几分钟 ...

  9. 洛谷 P2146 [NOI2015]软件包管理器 （树链剖分模板题）

    题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖(即下载安装这个 ...

  10. Linq基础必备

    1.linq基础必备之对象初始化器和匿名类型因果分析   3. 一:对象初始化器 1.就是在new的时候给公共属性赋值的一种方式 2. 在没有初始化器之前的时候,我们是怎么初始化的呢??? 1. 构造 ...