<!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. linux笔记七---------管道

    smarty的变量调节器就是linux的管道 管道:前者的输出是后者的输入 {$name|upper}   通过调节器使得名字变为大写输出 {$name|lower} linux的管道: ls –al ...

  2. jquery ui bootstrap日期插件

    http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...

  3. css3 animation 实现环形路径平移动画

    注意 @keyframes to/from 的学习 <!DOCTYPE html> <html lang="en"> <head> <me ...

  4. php Use of undefined constant的问题解决方式

    在每个文件头上加 error_reporting(0); 或者 搜索php.ini: error_reporting = E_ALL 改为: error_reporting = E_ALL & ...

  5. AppStore审核

    应用被拒分为两种:Binary Rejected 和 Metadata Rejected.前者需要重新上传应用并且重新排队,后者只需要修改信息,不需要重新上传应用. 1.应用内包含检查更新功能 iOS ...

  6. 安卓模拟器研究-root

    http://www.bluestacks.cn/index.asp 下载最新的 BlueStacks 尝试了很久都没有root成功. 百度搜索  找到经验文档 http://jingyan.baid ...

  7. 树莓派文档翻译 - 使用 - GPIO: 树莓派A和B

    https://www.raspberrypi.org/documentation/usage/gpio/README.md 2016/6/25 GPIO: 树莓派A和B ##介绍GPIO和在树莓派上 ...

  8. VS2010 更改C#类库模板

    首先你找到你自己的 VS2010安装目录,例如我本地是: D:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\ItemTem ...

  9. Thinking in Java--笔记(2)

    Everything Is an Object You manipulate objects with references Each programming language has its own ...

  10. which go

    http://www.yiibai.com/go/go_environment.html