<!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. IE 9 以下兼容HTML5

    <head> <meta name="viewport" content="width=device-width,initial-scale=1.0&q ...

  2. [NoSQL]验证redis的主从复制

    安装配置redis  http://www.cnblogs.com/myrunning/p/4222385.html 1.1查看当前redis文件 1.2修改配置文件 拷贝配置文件分别为redis_m ...

  3. Datatable转换Json

    #region Datatable转换为Json        /// <summary>         /// Datatable转换为Json         /// </su ...

  4. 安装完MySQL数据库，在服务列表里找不到MySQL的解决办法

    安装MySQL数据库完成后,在控制面板的服务列表里找不到MySQL服务启动项解决方案:(参考以下命令)1.打开cmd,切换到mysql的bin目录下 (dos命令切换目录||1.cd\ 返回到根目录, ...

  5. Jedis工具类

    1.RedisCache.java package cn.itcast.mybatis.dao; import java.util.Date;import java.util.HashMap;impo ...

  6. 使用putty组件向服务器上传或下载文件

    基于SSH的连接 上传文件: pscp -P 28661(portNum) -pw password sourceFilePath user@serverIP:destinationFilePath ...

  7. dom4j解析xml文档&保存数据的乱码问题

    package itcast.dom4j; import java.io.File; import java.io.FileOutputStream; import java.io.FileWrite ...

  8. Final-阶段站立会议1

    组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...

  9. Codeforces Round #346 (Div. 2) E F

    因为很久没有个人认真做题了 昨天晚上开了场虚拟cf来锻炼个人手速 选的是第一次做cf的场 那时候7出3还被hack...之后也没补题 这次做的时候顺便回忆了一下以前比赛的时候是怎么想的 发现经验还是很 ...

  10. 移动端性能优化动态加载JS、CSS

    JS CODE (function() { /** * update: * 1.0 */ var version = "insure 1.1.0"; var Zepto = Zep ...