<!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. HDU 4752 Polygon（抛物线长度积分）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4752 题意:给出一个抛物线和一个简单多边形.求抛物线在多边形内部的长度. 思路:首先求出多边形所有边和 ...

  2. What is the difference between DAO and DAL?

    What is the difference between DAO and DAL? The Data Access Layer (DAL) is the layer of a system tha ...

  3. How can I work smarter, not just harder? Ask it forever

    How can I  work smarter, not just harder? 记住,永远要问自己这个问题.当你发现在做一件事情时,总是那么的繁琐无味,那么一定是出了什么问题. 如果一味地强调更加 ...

  4. Qt之模型/视图（自定义按钮）

    简述 衍伸前面的章节,我们对QTableView实现了数据显示.自定义排序.显示复选框.进度条等功能的实现,本节主要针对自定义按钮进行讲解,这节过后,也希望大家对自定义有更深入的了解,在以后的功能开发 ...

  5. UVa 11134 (区间上的贪心) Fabled Rooks

    这道题真是WA得我心力交瘁,好讨厌的感觉啊! 简直木有写题解的心情了 题意: n×n的棋盘里,放置n个车,使得任意两车不同行且不同列,且第i个车必须放在给定的第i个矩形范围内.输出一种方案,即每个车的 ...

  6. 【第三篇】说说javascript处理时间戳

    在做datagrid的时候,从数据库读出来的数据是/Date(1437705873240)/大概是这种形式,这个就是时间戳 我们需要把/Data和/去掉,才可以转成我们要的格式. 上代码 { fiel ...

  7. ajax连接数据库并操作数据库

    Response.Write("<script  type='text/javascript' language='javascript' >alert('用户名不能为空!请输入 ...

  8. org.hibernate.AnnotationException: No identifier specified for entity: cn.itcast.domain.Counter

    因为我的hibernate映射表没有主键所以报这个错. 解决方案是: 1.创建一个主键 2.hibernate处理无主键的表的映射问题,其实很简单,就是把一条记录看成一个主键,即组合主键<com ...

  9. MySQL server has gone away 的解决方法

    原文引用至:http://www.jb51.net/article/23781.htm,感谢! 可能原因:1.发送的SQL语句太长,以致超过了max_allowed_packet的大小,如果是这种原因 ...

  10. Datawindow.net 子数据窗口出错

    devexpress通过标签页面打开用户控件,数据窗口嵌入用户控件中.当点击数据窗口含下拉数据窗口字段时出现如下错误: 未处理 System.NullReferenceException Messag ...