<!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. ant学习

    如果在构建文件当中depends后面有多个依赖,而且这多个依赖还相互依赖,那么只会执行被依赖的任务,不会重复执行任务 ant学习

  2. php课程---初学练习

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

  3. LaTex 插入图片

    \usepackage{mathrsfs} \usepackage{amsmath} \usepackage{graphicx} 宏包 \includegraphics{graph01.eps} %插 ...

  4. node js 模块分类

    核心模块 require('fs'); 核心模块是被编译成二进制代码 文件模块 require('../fs.js'); 对于加载模块时既没指出./ ../ /.../时,加载模块的搜索路径.如果'/ ...

  5. 【iCore3 双核心板】例程十三：SDIO实验——读取SD卡信息

    实验指导书及代码包下载: http://pan.baidu.com/s/1hqM787E iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  6. linux chmod 命令

    Avril 首页 新随笔 管理 随笔 - 153  文章 - 1  评论 - 58 修改linux文件权限命令:chmod   Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何 ...

  7. ios-NSMutableAttributedString 更改文本字符串颜色、大小

    NSString * string = [NSString stringWithFormat:@"您的号码是%@号",[self backString:dic[@"ran ...

  8. Yii源码阅读笔记（二十一）——请求处理流程

    Yii2请求处理流程: 首先:项目路径/web/index.php (new yii\web\Application($config))->run();//根据配置文件创建App实例,先实例化y ...

  9. Ruby--strftime

    -- [17 Oct 2016 05:37:18AM]:%e %b %Y %H:%M:%S%p -- [Oct 17, 2016]:%b %d, %Y -- [10-17-16 05:37]:%m-% ...

  10. [daily] 宇宙终极shell之zsh

    序 很久以前,我就知道zsh.后来在并不遥远的好几年前,第一次装arch的时候,默认shell就是zsh.虽然用起来不太习惯,但是仍然蛮好用的. 决定好好的学一下zsh,如果可以就切换过去,毕竟bas ...