<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #wrap {
            width: 590px;
            height: 340px;
            margin: 50px auto;
            border: #000 1px solid;
            overflow: hidden;
            position: relative;
        }

        #wrap a {
            display: block;
            width: 50px;
            height: 30px;
            background: #000;
            opacity: .5;
            color: #fff;
            line-height: 30px;
            text-align: center;
            position: absolute;
            top: 50%;
            margin-top: -15px;
            text-decoration: none;
            font-weight: 900;
            font-size: 24px;
            z-index: 990;
        }

        #prev {
            left: 0;
        }

        #next {
            right: 0;
        }

        #btn {
            position: absolute;
            left: 50%;
            bottom: 10px;
            width: 130px;
            margin-left: -65px;
            z-index: 999;
        }

        #btn li {
            width: 20px;
            height: 20px;
            float: left;
            margin-left: 6px;
            border-radius: 50%;
            background: #c00;
        }

        #btn li.active {
            background: #ccc;
        }

        #box {
            height: 340px;
            position: absolute;
        }

        #box li {
            width: 590px;
            height: 340px;
            position: absolute;
            left: 0;
            top: 0;
            opacity:0;
        }

        #box img {
            width: 590px;
            height: 340px;
        }
    </style>
    <script src="move.js"></script>
    <script>
        window.onload = function () {
            var oWrap = document.getElementById('wrap');
            var oBox = document.getElementById('box');
            var oBtn = document.getElementById('btn');
            var aBtn = oBtn.children;
            var aLi = oBox.children;
            var oPrev = document.getElementById('prev');
            var oNext = document.getElementById('next');
            var iNow = 0;

            for (var i = 0; i < aBtn.length; i++) {
                aBtn[i].index = i;
                aBtn[i].onclick = function () {
                    iNow = this.index;
                    tab();
                }
            }

            function tab() {
                for (var i = 0; i < aLi.length; i++) {
                    aBtn[i].className = '';
                    move(aLi[i], {opacity: 0});
                }
                aBtn[iNow].className = 'active';
                move(aLi[iNow], {opacity: 1});
            }
            oPrev.onclick = function () {
                iNow--;
                if (iNow == -1)iNow = aBtn.length - 1;
                tab();
            };

            oNext.onclick = next;
            function next() {
                iNow++;
                if (iNow == aBtn.length)iNow = 0;
                tab();
            }
            var timer = null;
            timer = setInterval(next,3000);
            oWrap.onmouseover = function(){
                clearInterval(timer);
            };
            oWrap.onmouseout = function(){
                timer = setInterval(next,3000);
            };
        }
    </script>
</head>
<body>
<div id="wrap">
    <a href="javascript:;" id="prev">←</a>
    <a href="javascript:;" id="next">→</a>
    <ul id="box">
        <li style="opacity:1;"><img src="img/1.jpg" alt=""/></li>
        <li><img src="img/2.jpg" alt=""/></li>
        <li><img src="img/3.jpg" alt=""/></li>
        <li><img src="img/4.jpg" alt=""/></li>
        <li><img src="img/5.jpg" alt=""/></li>
    </ul>
    <ol id="btn">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>
</body>
</html>

/**
 * Created by Administrator on 2016/11/3.
 */
function getStyle(obj, name) {
    if (obj.currentStyle) {
        return obj.currentStyle[name];
    } else {
        return getComputedStyle(obj, false)[name];
    }
}

function move(obj, json, options) {
    clearInterval(obj.timer);
    options = options || {};
    options.time = options.time || 500;
    options.easeing = options.easeing || 'ease-out';
    var dis = {};
    var start = {};
    for (var name in json) {
        start[name] = parseFloat(getStyle(obj, name));
        dis[name] = json[name] - start[name];
    }
    var count = Math.floor(options.time / 30);
    var n = 0;
    obj.timer = setInterval(function () {
        n++;
        for (var name in json) {
            switch (options.easeing) {
                case 'linear':
                    var a = n / count;
                    var cur = start[name] + dis[name] * a;
                    break;
                case 'ease-in':
                    var a = n / count;
                    var cur = start[name] + dis[name] * a * a * a;
                    break;
                case 'ease-out':
                    var a = 1 - n / count;
                    var cur = start[name] + dis[name] * (1 - a * a * a);
            }
            if (name == 'opacity') {
                obj.style.opacity = cur;
                obj.style.filter = 'alpha(opacity:' + cur * 100 + ')';
            } else {
                obj.style[name] = cur + 'px';
            }
        }
        if (n == count) {
            clearInterval(obj.timer);
            options.fn && options.fn();
        }
    }, 30);
}

js轮播的更多相关文章

  1. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  2. js___原生js轮播

    原生js轮播 作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评: 首先css代码 a{text-decoration:none;color:#3DBBF ...

  3. JavaScript的案例（数据校验，js轮播图，页面定时弹窗）

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  4. 纯js轮播图练习-2，js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  5. 纯js轮播图练习-1

    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...

  6. 原生JS轮播-各种效果的极简实现（二）面向对象版本的实现和优化

    之前写了一篇原生JS轮播,不过是非面向对象的,并且也没有添加上自动轮播.这里来写一下如何优化和进阶. 这里简单地介绍一下之前的代码,这是html结构 <body> <div clas ...

  7. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JS轮播图（网易云轮播图）

    JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...

  9. 原生js轮播以及setTimeout和setInterval的理解

    下面这个代码是从一个群下载下来的,为了帮助自己理解和学习现在贴出来,与初学者共勉. <!DOCTYPE html> <html> <head> <meta c ...

  10. 问题：关于坛友的一个js轮播效果的实现

    需求:点击向前按钮进行向前翻页,向后按钮进行向后翻页,点击中间蓝色小圆圈可以来回自由切换 我的大概思路:先默认显示一个div  然后在原位置在隐藏一个div   给按钮添加click事件,转到下一个时 ...

随机推荐

  1. 把应用程序exe 注册成为windows 服务的方法

    由于在Windows 服务器上必须要启动一个软件,提供外网访问内网的客户端软件,但是由于每次远程服务器之后会注销当前用户,所以客户端软件就会自动退出,那么我在外网的系统就不能支持访问了. 解决方案:将 ...

  2. C++STL -- vector 使用

    vector是一种顺序容器. vector常用API: 现在一个个分析: 1. assign 这是一种赋值方法,但是会覆盖原来容器内的值. void assign( size_type num, co ...

  3. C遇到的问题

    1. stdout-------printf输出到stdout,并在终端打印 stderr--------perror错误输出到stderr,并在终端打印 2. usleep(1)//代表一微妙 sl ...

  4. C# Array

    一.声明数组时,方括号[]必须跟在类型后面,而不是标识符后面 int[] table;  //而不是 int table[]; 二.数组的大小不是其类型的一部分 int[] numbers; numb ...

  5. DevExpress GridView中加入CheckBox方法

    添加一列,FieldName为 "check",将ColumnEdit 设置为 复选框 样式.gridview1 editable设置为true 将要绑定的DataTable添加列 ...

  6. Android中<meta-data>的使用

    [转]  原文 在AndroidManifest.xml中,<meta-data>元素可以作为子元素,被包含在<activity>.<application> .& ...

  7. Day2(2016/1/22)——Testing

    Activity Button,Toast,Finish 显式intent 隐式明天再看…… 感觉要先补一补java……

  8. Linux下安装Redis3.2.4

    安装: 通过wget方式直接在linux上下载Redis $ wget http://download.redis.io/releases/redis-3.2.4.tar.gz , 默认下载到路径是r ...

  9. php递归遍历目录计算其大小（文件包括目录和普通文件）

    <?php function countdir($path){ $size = 0; //size = 0; 跟 size = null; 怎么结果不一样 $path = rtrim($path ...

  10. free-library-converts-2d-image-to-3d

    http://www.i-programmer.info/news/105-artificial-intelligence/4917-free-library-converts-2d-image-to ...