<!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 - 3259 Wormholes (bellman-ford算法求最短路）

    http://poj.org/problem?id=3259 农夫john发现了一些虫洞,虫洞是一种在你到达虫洞之前把你送回目的地的一种方式,FJ的每个农场,由n块土地(编号为1-n),M 条路,和W ...

  2. ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】

    具体实现的效果如图:

  3. c#快捷键大全

    转发:http://zhidao.baidu.com/question/444655283 直接贴出来吧(关于VS的): 快捷键 功能 CTRL + SHIFT + B生成解决方案 CTRL + F7 ...

  4. UVa 10791 Minimum Sum LCM【唯一分解定理】

    题意:给出n,求至少两个正整数,使得它们的最小公倍数为n,且这些整数的和最小 看的紫书--- 用唯一分解定理,n=(a1)^p1*(a2)^p2---*(ak)^pk,当每一个(ak)^pk作为一个单 ...

  5. WEBUS2.0 In Action - 索引操作指南（2）

    上一篇:WEBUS2.0 In Action - 索引操作指南(1) | 下一篇:WEBUS2.0 In Action - 搜索操作指南(1) 3. 添加.删除.撤销删除和修改文档 在WEBUS中要将 ...

  6. How to begin with the webpage making

    1.网页制作三剑客必须要会使用.(dreamweaver  /fireworks/flash)2.学习些最基层的html语言的知识,3.在学习一些基本的html标签(要多加练习哦)4.先试着用表格进行 ...

  7. HDU 3555 Bomb (数位DP-记忆化搜索模板)

    题意 求区间[1,n]内含有相邻49的数. 思路 比较简单的按位DP思路.这是第一次学习记忆化搜索式的数位DP,确实比递推形式的更好理解呐,而且也更通用~可以一般化: [数位DP模板总结] int d ...

  8. Vagrant使用笔记

    vagrant box add [options] <name, url, or path> - 添加box至vagrant的管理列表 vagrant init 初始化虚拟机至当前文件夹并 ...

  9. windows xp 安装mysql5.6.17-ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password

    .zip解压后没有setup 没有my.ini 1.安装方法 bin目录下执行以下: E:\mysql-5.6.17-win32\bin>mysqld install MySQL --defau ...

  10. NoSQL架构实践（一）——以NoSQL为辅

    前面<为什么要使用NoSQL>和<关系数据库还是NoSQL数据库>两篇从大体上介绍了为什么要用NoSQL,何时该用NoSQL.经常有朋友遇到困惑,看到NoSQL的介绍,觉得很好 ...