<!doctype html>

<html>

    <head>

    <meta charset="utf-8">

        <title>无标题文档</title>

        <style>

            *{

                margin:0;

                padding: 0;

            }

            #div1{

                width:600px;height:400px;border:1px solid #000;margin: 100px auto 0; position: relative;overflow:hidden;

            }

            #ul1{

                position: absolute;left: 0;top: 0;margin: 0;padding: 0;

            }

            li{

                list-style-type: none;float: left;

            }

            img{display: block;}

            #div1 p { text-align: center; position: absolute; width: 100%; bottom: 10px;}

            #div1 p span {padding: 2px 9px; background: #CCC; border-radius: 50%; margin-left: 5px; cursor: pointer;}

            #div1 p span.current { background:#F90;}

        </style>

        <script>

            window.onload = function (){

                var odiv = document.getElementById('div1');

                var oul = document.getElementById('ul1');

                var ali = oul.getElementsByTagName('li');

                var aspan = odiv.getElementsByTagName('span');

                var ilen = ali.length;

                var iwidth = ali[0].offsetWidth;

                oul.style.width = ilen * iwidth + 'px';

                for(var i = 0; i < ilen; i++)

                {

                    aspan[i].index = i;

                    aspan[i].onclick = function(){

                        for(var i = 0; i < ilen; i++)

                        {

                            aspan[i].className = '';

                        }

                        this.className = 'current';

                        startMove(oul, {

                            left : -this.index * iwidth

                        });

                    }

                }

            }

            function startMove(obj, json, fn) {

                clearInterval(obj.iTimer);

                var iCur = 0;

                var iSpeed = 0;

                obj.iTimer = setInterval(function() {

                    var iBtn = true;

                    for ( var attr in json ) {

                        var iTarget = json[attr];

                        if (attr == 'opacity') {

                            iCur = Math.round(css( obj, 'opacity' ) * 100);

                        } else {

                            iCur = parseInt(css(obj, attr));

                        }

                        iSpeed = ( iTarget - iCur ) / 8;

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

                        if (iCur != iTarget) {

                            iBtn = false;

                            if (attr == 'opacity') {

                                obj.style.opacity = (iCur + iSpeed) / 100;

                                obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';

                            } else {

                                obj.style[attr] = iCur + iSpeed + 'px';

                            }

                        }

                    }

                    if (iBtn) {

                        clearInterval(obj.iTimer);

                        fn && fn.call(obj);

                    }

                }, 30);

            }

        function css(obj, attr) {

            if (obj.currentStyle) {

                return obj.currentStyle[attr];

            } else {

                return getComputedStyle(obj, false)[attr];

            }

        }

        </script>

    </head>

    <body>

        <div id = "div1">

            <ul id="ul1">

                <li><img src="img/5-1.jpg"></li>

                <li><img src="img/5-2.jpg"></li>

                <li><img src="img/5-3.jpg"></li>

                <li><img src="img/5-4.jpg"></li>

                <li><img src="img/5-5.jpg"></li>

                <li><img src="img/5-6.jpg"></li>

            </ul>

            <p>

            <span class="current"></span>

            <span></span>

            <span></span>

            <span></span>

            <span></span>

            <span></span>

            </p>

        </div>

    </body>

</html>

js运动 模仿淘宝幻灯的更多相关文章

  1. 漂亮！Javascript代码模仿淘宝宝贝搜索结果的分页显示效果

    分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager  JS ...

  2. android ------ RecyclerView 模仿淘宝购物车

    电商项目中常常有购物车这个功能,做个很多项目了,都有不同的界面,选了一个来讲一下. RecyclerView 模仿淘宝购物车功能(删除选择商品,商品计算,选择, 全选反选,商品数量加减等) 看看效果图 ...

  3. 模仿淘宝首页写的高仿页面，脚本全用的原生JS，菜鸟一枚高手看了勿喷哈

    自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : ...

  4. 模仿 "淘宝彩票" 的随机选球投注效果！

    我个人比较喜欢看网页的效果,前几天看了淘宝的“淘宝彩票”,今天仿造做了一个,我觉得比淘宝的体验要好. 查看 “淘宝彩票” 的网页源码发现,主要是用到了Css3 transform 的 Matrix 来 ...

  5. jQuery模仿淘宝商品评价

    最近做项目要做个商品评价的功能,我直接就跑到淘宝那里去研究了,可看着晕晕的,还不知道他是怎么做的,于是把图抠了下来,自己写了一个,接下来就展示一下我是怎么做的,大家有不同的实现方法可要记得分享一下呀. ...

  6. js 实现仿 淘宝 五星评价 demo

    <style> @font-face { font-family: 'iconfont'; /* project id 247957 */ src: url('//at.alicdn.co ...

  7. JQuery模仿淘宝天猫魔盒抢购页面倒计时效果

    1.效果及功能说明 通过对时间的控制来告诉用户一个活动还剩多少时间,精确到秒.2.实现原理 首先定义活动的截至的时间,要重年份精确到毫秒,在获得当前的年份到秒钟,在用截至时间,减去现在的时间,剩下的还 ...

  8. js 关于网易淘宝移动端适配的学习

    (function (doc, win) { // orientationchange:用户水平或者垂直翻转设备(即方向发生变化)时触发的事件;(屏幕大小发生变化) var docEl = doc.d ...

  9. jquery模仿淘宝星星打分

    今天做论坛页面有星星评分功能,以下是代码.用的时候引入jquery <span> <ul class="hs_df_xx"> <li><i ...

随机推荐

  1. poj-1017 Packets （贪心）

    http://poj.org/problem?id=1017 工厂生产高度都为h,长和宽分别是1×1 2×2 3×3 4×4 5×5 6×6的6种规格的方形物品,交给顾客的时候需要包装,包装盒长宽高都 ...

  2. JAVA中封装JSONUtils工具类及使用

    在JAVA中用json-lib-2.3-jdk15.jar包中提供了JSONObject和JSONArray基类,用于JSON的序列化和反序列化的操作.但是我们更习惯将其进一步封装,达到更好的重用. ...

  3. hql得到一个实体的数量

    Session session=this.getSession;string hql="select count(tb) from table tb";Query query=se ...

  4. 二维线性表 list实现

    class Coordinate{ private int x; private int y; } List<Coordinate> list=new ArrayList<Coord ...

  5. bzoj2119

    题意就是差分后求形如ABA的串的个数,B的长度为M 这是2011国家集训队互测的试题,是道好题,我直接给出出题人的题解吧: 对于这种在线性序列上的组合计数问题,我们很容易想到一个工具:分治!分治算法在 ...

  6. 移动WebApp开发框架(珍藏)

     1.Jquery Mobilehttp://demos.jquerymobile.com/1.4.5/button-markup/http://andymatthews.net/code/jQuer ...

  7. 每个极客都应该知道的Linux技巧

    每个极客都应该知道的Linux技巧 2014/03/07 | 分类: IT技术 | 0 条评论 | 标签: LINUX 分享到:18 本文由 伯乐在线 - 欣仔 翻译自 TuxRadar Linux. ...

  8. （转）iOS动画Core Animation

    文章转载:http://blog.sina.com.cn/s/blog_7b9d64af0101b8nh.html 在iOS中动画实现技术主要是:Core Animation. Core Animat ...

  9. hdu 1226 超级密码（bfs+余数判重）

    题意:略过 分析:用m个数字组成一个能够被n整除的c进制数的最小值,实际上本题的关键就在于这个最小值上.  首先确定我们的思路是从小到大寻找.先查看一位数,即查看着m个数字是否能被n整除:若不能,就查 ...

  10. typedef函数指针用法

    typedef void(*vp)(); 将vp声明为一个函数指针类型,该类型的指可以针指向一个没有参数,带空返回值的函数. 调用方法vp p;创建一个vp类型的函数指针p void print(vp ...