<!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. leetcode：Summary Ranges

    Given a sorted integer array without duplicates, return the summary of its ranges. For example, give ...

  2. 《OD大数据实战》HBase环境搭建

    一.环境搭建 1. 下载 hbase-0.98.6-cdh5.3.6.tar.gz 2. 解压 tar -zxvf hbase-0.98.6-cdh5.3.6.tar.gz -C /opt/modul ...

  3. AI中去掉页面边框

    其实也没啥说的,就是很多人在百度中问这个在AI中这样除去页面边框,其实很简单,用快捷组合键  ctrl+shift+H  就行啦,边框自己就没了

  4. 【笨嘴拙舌WINDOWS】键盘消息，鼠标消息

    键盘消息 Windows系统无论何时只有一个窗口(可能是子窗口,也就是控件)能获得焦点. 焦点窗口通过windows消息来响应人的键盘操作,与键盘相关的常用消息罗列如下: WM_KEYDOWN   按 ...

  5. Qt之显示网络图片

    简述 Qt中包含了网络模块-network,我们可以很容易的进行各种网络编程和数据传输,关于network的类很多,其中包含:支持DNS.HTTP.TCP/UDP等众多高级类,可以参考助手. 下面我们 ...

  6. Spring MVC 下index.jsp访问

    spring-mvc.xml配置 <!-- 对模型视图名称的解析,即在模型视图名称添加前后缀 --> <bean class="org.springframework.we ...

  7. HDU 2066 一个人的旅行【Dijkstra 】

    题意:给出s个起点,d个终点,问从这些起点到达终点的最短距离 因为有多个起点,所以把这多个起点的值设为0 哎= =改了好久的说= = 是因为在代码里面的t,不知道为什么调用dijkstra()函数之后 ...

  8. jquery火焰等效果导航菜单

    jQuery-火焰灯效果导航菜单 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpre ...

  9. Windows Tftpd32 DHCP服务器 使用

    /********************************************************************* * Windows Tftpd32 DHCP服务器 使用 ...

  10. margin collapse 之父子关系的DIV

    打算花点时间将知识整理一下,虽然平时现用现查都能完成工作,可是当遇到面试这种事情的时候,临时查就来不及了... 关于margin,整理若干知识点如下: 一:父子关系的DIV标签以及未加margin时的 ...