<!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. windows服务删除后，在次安装时无法安装启动。

    当我在windows的cmd下卸载evtsys evtsys -u  再次安装时evtsys.exe -i -h 192.168.32.12 -p 514 提示“指定的服务已标记为删除”,进入服务管理 ...

  2. BZOJ 1041 圆上的整点

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1041 题意:求圆x^2+y^2=r^2上的整点. 思路:由于对称性,我们只需要计算第一象 ...

  3. ORACLE EBS R12 - 寄售功能知多少

    材料以寄售方式供应,是制造业实现零库存管理的一种方式.东西放在我这里,不用的时候,东西还是供应商的,用的时候,按"装机"数量进行付款.这种业务模式,对于竞争日趋白热化的家电行业,非 ...

  4. grunt <% %>模板和使用配置文件

        使用<% %>分隔符指定的模板会在任务从它们的配置中读取相应的数据时将自动扩展扫描.模板会被递归的展开,直到配置中不再存在遗留的模板相关的信息(与模板匹配的).    整个配置对象 ...

  5. HDFS常用命令

    HDFS 常用的文件操作命令 hdfs dfs -text /pub/20151019/1/4/gwmvod/mediags.moretv.com.cn/*.bz2 | wc -l  hdfs dfs ...

  6. 07_js走路小游戏

    <html> <head> <!-- 不做了,思路: 按enter键停止,将xs,ys替换为0,再次按,判断xs和ys是否为0,是的话,讲根据fx给xsys赋值. 实现鼠 ...

  7. MIPI DSI 和 D-PHY 初始化序列

    MIPI DSI 和 D-PHY 初始化序列 -- 深圳 南山平山村 曾剑锋 参考文档: i.MX 6Dual/6Quad Multimedia Applications Processor Refe ...

  8. CodeIgniter 3之Session类库(3)(转)

    本文主要讲CI2和CI3关于Session类库的区别.我们知道CI2的Session类使用了cookie来传递session数据.使用 cookie保存会话的好处在于可以节省服务器资源,但坏处也是显而 ...

  9. （六）6.12 Neurons Networks from self-taught learning to deep network

    self-taught learning 在特征提取方面完全是用的无监督的方法,对于有标记的数据,可以结合有监督学习来对上述方法得到的参数进行微调,从而得到一个更加准确的参数a. 在self-taug ...

  10. 【转】使用Xcode和Instruments调试解决iOS内存泄露

    原文网址:http://blog.csdn.net/totogo2010/article/details/8233565 虽然iOS 5.0版本之后加入了ARC机制,由于相互引用关系比较复杂时,内存泄 ...