<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style>

        * {

            margin:0px;

            padding:0px;

        }

        #wrap {

            width:200px;

            height:200px;

            position:absolute;

            overflow:hidden;

        }

        #ul_box {

            width:800px;

            height:200px;

            position:absolute;

            list-style-type:none;

        }

        li {

            float:left;

        }

        img {

            width:200px;

        }

    </style>

</head>

<script src="tween.js"></script>

<body>

    <div id="wrap">

        <ul id="ul_box">

            <li class="item">

                <img src="89948850c0b9d07866e026dfe6c6e7d7.jpg" /> </li>

            <li class="item">

                <img src="98ad3f445b051290c49c09a63bfb6e36.jpg" /> </li>

            <li class="item">

                <img src="aac3722ea3b9c114028d6f9efa8fccdf.jpg" /> </li>

            <li class="item">

                <img src="89948850c0b9d07866e026dfe6c6e7d7.jpg" /> </li>

        </ul>

    </div>

    <script>

        var myUl= document.getElementById("ul_box");

        var myLi = document.getElementsByClassName("item");

        var t = 0;

        var b = 0;//初始位置

        var c = -200;

        var d = 1000;

        function lunbo() {

            function run() {

                t += 1;

                myUl.style.left = Tween.Bounce.easeInOut(t, b, c, d) + "px";

                if (t == d) {

                    clearInterval(timer);

                    t = 0;

                    b -= 200;

                }

                if (myUl.offsetLeft <-600) {

                    myUl.style.left = "0px";

                    b = 0;

                }

            }

            var timer = setInterval(run, 10);

        }

        var bo = setInterval(lunbo, 4000);

    </script>

</body>

</html>

tween.js下面的轮播（饿了么点餐的那种效果）的更多相关文章

  1. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  2. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  3. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  4. 原生js实现无缝轮播

    原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...

  5. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  6. Bootstrap的js插件之轮播(carousel)

    轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> < ...

  7. JS+css3焦点轮播图PC端

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js原生实现轮播图效果（面向对象编程）

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  9. 用JS做图片轮播

    脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...

随机推荐

  1. Python mutilprocess模块之第二种创建进程方法--继承Process类

    '''创建新的进程的第二种方法: 使用类的方式,可以自己定义一个类,继承Process类,每次实例化这个类的时候, 就等于实例化一个进程对象 '''from multiprocessing impor ...

  2. Native App、Web App 还是Hybrid App？(转)

    一.什么是Native App? Native App即原生应用,即我们一般所称的客户端,是针对不同手机系统单独开发的本地应用,如需使用需要先下载到手机并安装,下载Native App的最常见方法是访 ...

  3. 使用VirtualBox虚拟机搭建局域网(续)

    最近家中Windows 10更新后抽风,最后不得不重装系统,原本配置好的开发环境全部要重装,也包括局域网搭建,但由于是家庭网络并非公司局域网,故旧文<使用VirtualBox虚拟机搭建局域网&g ...

  4. 025--python初识类和对象

    一.面向对象的定义 说到面向对象,我们先来看一下面向过程的定义:面向过程的程序设计的核心是过程(流水线式思维),过程即解决问题的步骤,面向过程的设计就好比精心设计好一条流水线,考虑周全什么时候处理什么 ...

  5. 家庭wifi，如何组网最合适

    wifi信号通过电磁波在空中传播的,属于微波通信的一种,因为微波本身及发射功率的限制,导致wifi的穿透能力比较差,北方比较厚的承重强,铁门.家具等对都会对wifi信号有较强的削弱作用.穿过的障碍物越 ...

  6. UILabel和UIButton添加下划线

    关于UILabel和UIButton有的时候需要添加下划线,一般有两种方式通过默认的 NSMutableAttributedString设置,第二种就是在drawRect中画一条下划线,本文就简单的选 ...

  7. pojcoin【未完待续】

    题意: 给你一些数字的种类,然后拥有这个种类的各个数量,输出可以组成多少数字,数字范围在1-m: 思路: 卧槽好难-

  8. 死磕了一题模拟 A掉的时候我是爽的

    ZOJ 3490 没有题解. 一句话,要么贴代码,要么自己打. #include<cstdio> #include<iostream> #include<vector&g ...

  9. python __builtins__ str类 （65）

    65.'str', 字节转换成字符串.第一个传入参数是要转换的字节,第二个参数是按什么编码转换成字符串 class str(object) | str(object='') -> str | s ...

  10. 转载文章 -- 难搞的滚动事件(滚动默认，scrollTop)

    关于取消默认事件 现今的 chrome 浏览器,为了实现丝滑顺畅地滑动,活动时间直接执行而不再检测默认事件,这使得无法用 e.preventDafult() 来阻止默认事件. 现在需要添加 {pass ...