<!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. 运行在VMware上的Linux虚拟机如何使用NAT模式连接物理机的外部网络

    在VMware Workstation中,默认有3个虚拟交换机,分别是VMnet0(使用桥接网络).VMnet1(仅主机网络)和VMnet8(NAT网络). 首先说一下为什么要用NAT模式,如果你的物 ...

  2. 深入了解ios系统机制

    1.什么叫ios?        ios一般指ios(Apple公司的移动操作系统) .        苹果iOS是由苹果公司开发的移动操作系统.苹果公司最早于2007年1月9日的Macworld大会 ...

  3. 您试图从目录中执行CGI、ISAPI 或其他可执行程序，但该目录不允许执行程序

    您试图从目录中执行CGI.ISAPI 或其他可执行程序,但该目录不允许执行程序 本人使用WIN2003 INTERNET信息服务(IIS)管理器建立一个网站虚拟目录,结果浏览网页时出现错误,错误提示信 ...

  4. php SPL学习

    数据结构 SplDoublyLinkedList - 该SplDoublyLinkedList类提供了一个双向链表的主要功能 SplStack - 该SplStack类提供了一种使用双向链表实现栈的主 ...

  5. an alternative to symmetric multiprocessing

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION 17.5 CLUSTERSAn impor ...

  6. Android RSA加密解密

    概述 RSA是目前最有影响力的公钥加密算法,该算法基于一个十分简单的数论事实:将两个大素数相乘十分容易,但那时想要对其乘积进行因式分解却极其困 难,因此可以将乘积公开作为加密密钥,即公钥,而两个大素数 ...

  7. SQL AND & OR 运算符

    AND 和 OR 运算符用于基于一个以上的条件对记录进行过滤. AND 和 OR 运算符 AND 和 OR 可在 WHERE 子语句中把两个或多个条件结合起来. 如果第一个条件和第二个条件都成立,则 ...

  8. List<T> 添加 DataTable

    public System.Data.DataTable getDataTable() { System.Data.DataTable dt = new System.Data.DataTable() ...

  9. 命令行子shell 括号 ()

    子shell 控制变量 ansible-direc:~ # (export hello=world;echo $hello)worldansible-direc:~ # echo $hello ans ...

  10. OC-数组排序-NSSortDescriptor使用

    OC-数组排序-NSSortDescriptor使用 在Object-c中,当有一个班级类MyClass,还有一个学生类Student.在班级类MyClass中通过一个可变数组NSMutableArr ...