<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{margin:0;padding:0;list-style:none;}
        a{text-decoration: none;color: #fff;}
        #flash{width: 730px;height: 454px;margin: 100px auto;position: relative;cursor: pointer;}
        #pic li{position: absolute;top: 0;left: 0;z-index: 1;display: none;}
        #num{position: absolute;left: 40%;bottom: 10px;z-index: 2;cursor:default;}
        #num li{float: left;width: 20px;height: 20px;border-radius: 50%;background: #666;margin: 3px;line-height: 20px;text-align: center;color: #fff;cursor: pointer;}
        #num li.active{background: #f00;}
        .arrow{height: 60px;width: 30px;line-height: 60px;text-align: center;display: block;position: absolute;top:45%;z-index: 3;display: none;}
        .arrow:hover{background: rgba(0,0,0,0.7);}
        #flash:hover .arrow{display: block;}
        #left{left: 2%;}
        #right{right: 2%;}
    </style>
    <script type="text/javascript">
        function $(id) {
            return typeof id==='string'?document.getElementById(id):id;
        }
        window.onload=function(){
            var index=0;
            var timer=null;
            var pic=$("pic").getElementsByTagName("li");
            var num=$("num").getElementsByTagName("li");
            var flash=$("flash");
            var left=$("left");
            var right=$("right");
            //单击左箭头
            left.onclick=function(){
                index--;
                if (index<0) {index=num.length-1};
                changeOption(index);
            }
            //单击右箭头
            right.onclick=function(){
                index++;
                if (index>=num.length) {index=0};
                changeOption(index);
            }            
            //鼠标划在窗口上面，停止计时器
            flash.onmouseover=function(){
                clearInterval(timer);
            }
            //鼠标离开窗口，开启计时器
            flash.onmouseout=function(){
                timer=setInterval(run,2000)
            }
            //鼠标划在页签上面，停止计时器，手动切换
            for(var i=0;i<num.length;i++){
                num[i].id=i;
                num[i].onmouseover=function(){
                    clearInterval(timer);
                    changeOption(this.id);
                }
            }        
            //定义计时器
            timer=setInterval(run,2000)
            //封装函数run
            function run(){
                index++;
                if (index>=num.length) {index=0};
                changeOption(index);
            }
            //封装函数changeOption
            function changeOption(curindex){
                console.log(index)
                for(var j=0;j<num.length;j++){
                    pic[j].style.display="none";
                    num[j].className="";
                }
                pic[curindex].style.display="block";
                num[curindex].className="active";
                index=curindex;
            }
        }
    </script>
</head>
<body>
    <div id="flash">
        <ul id="pic">
            <li style="display:block"><img src="http://img13.360buyimg.com/da/jfs/t2242/262/578407619/87636/4ffe0c5/56187ed2Nfed9a5b3.jpg" alt=""></li>
            <li><img src="http://img13.360buyimg.com/da/jfs/t2143/111/577347825/96150/e27180bd/561889b3N42ee62b5.jpg" alt=""></li>
            <li><img src="http://img20.360buyimg.com/da/jfs/t1825/234/1750370913/97529/b9229832/560b5ad3N054605f7.jpg" alt=""></li>
            <li><img src="http://img10.360buyimg.com/da/jfs/t2026/215/573306345/95654/a0211937/5618a735N1b3d8423.jpg" alt=""></li>
            <li><img src="http://img20.360buyimg.com/da/jfs/t2065/362/579832759/78899/6f349917/5618c680N3752bacc.jpg" alt=""></li>
            <li><img src="http://img10.360buyimg.com/da/jfs/t2023/45/384256123/101565/9b6e5daf/5604bdceN8c7d2ccf.jpg" alt=""></li>
        </ul>
        <ol id="num">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ol>
        <a href="javascript:;" class="arrow" id="left">&lt;</a>
        <a href="javascript:;" class="arrow" id="right">&gt;</a> 
    </div>
</body>
</html>

js仿京东轮播图效果的更多相关文章

  1. js原生实现轮播图效果（面向对象编程）

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  2. JavaScript学习——使用JS实现首页轮播图效果

    1.相关技术 获取元素 document.getElementById(“id 名称”) 事件(onload) 只能写一次并且放到body标签中 定时操作:setInterval(“changeImg ...

  3. JS实现自动轮播图效果（js案例）

    现在很多网站都有轮播图,这篇文章主要为大家详细介绍了js实现轮播图的完整代码及原理,需要的小伙伴可以参考一下. 1.轮播图主要功能: 1.  图片自动轮播(主图切换同时下面导航图片也会跟着变化) 2. ...

  4. JS学习笔记--轮播图效果

    希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...

  5. Javascript 京东轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 【JavaScript】案例二：使用JS完成首页轮播图效果——事件（onclick&onload)

    1.切换图片例子: 事件(onclick) <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  7. 使用JS完成首页轮播图效果

    获取document.getElementById("id名称"); 事件onload 定时操作setInterval("changeImg()",3000); ...

  8. jquery.flexslider-min.js实现banner轮播图效果

    实现方法 引用jQuery和flexslider.js到你的页面 <script type="text/javascript" src="js/jquery-1.7 ...

  9. jQuery---京东轮播图

    京东轮播图 有个计数的,点右边,计数增加,判断计数是否超过总的长度,超过设置计数为0,再设置当前的图片动画,兄弟的图片动画 左边点击同理,计数是--,判断计数是否等于-1,等于则reset计数为总长度 ...

随机推荐

  1. java位运算符常见用法

    1. 判断int型变量a是奇数还是偶数 a&1 = 0 偶数 a&1 = 1 奇数 2. 求平均值,比如有两个int类型变量x.y,首先要求x+y的和,再除以2,但是有可能x+y的结果 ...

  2. 硬盘坏道 检测/修复 Windows

    1. 主要参看了:http://jingyan.baidu.com/article/2c8c281dfd93df0008252a9b.html 2. 2.1.hdtunepro.zip 是在 http ...

  3. 【转】《深入理解计算机系统》C程序中常见的内存操作有关的典型编程错误

    原文地址:http://blog.csdn.net/slvher/article/details/9150597 对C/C++程序员来说,内存管理是个不小的挑战,绝对值得慎之又慎,否则让由上万行代码构 ...

  4. git本地文件回滚操作

    今天有几个文件改在了其他分支上.需要回滚. 参考了下面两篇文章: Link    Link 简单讲,分多个不同的阶段: 1. 用git status命令看,发现是unstaged,那么就是只在work ...

  5. C++——使用类

    一.运算符重载 1.运算符重载 C++允许将运算符重载扩展到用户定义的类型. 要重载运算符,需使用被称为运算符函数的特殊函数形式.运算符函数的格式如下: operatorop(argument lis ...

  6. hiho1122_二分图匈牙利算法

    题目 给定一个图的N个节点和节点之间的M条边,数据保证该图可以构成一个二分图.求该二分图最大匹配. 题目链接:二分图最大匹配     首先通过染色法,将图的N个节点分成两个部分:然后通过匈牙利算法求二 ...

  7. sql raiseerror

    raiserror 的作用: raiserror 是用于抛出一个错误.[ 以下资料来源于sql server 2005的帮助 ]   其语法如下: RAISERROR ( { msg_id | msg ...

  8. phalcon: 缓存片段，文件缓存，memcache缓存

    几种缓存,需要用到前端配置,加后端实例配合着用 片段缓存: public function indexAction() { //渲染页面 $this->view->setTemplateA ...

  9. dom4j如何解析xml

    简单解析自己定义的xml文件,首先,给解析xml文件的类来个构造方法: public xmlData(File xmlFile) { file = xmlFile; try { saxReader = ...

  10. linux gcc 编译动态类库(.so)和静态类库(.a)

    linux gcc 编译动态类库(.so)和静态类库(.a) 我的编译环境 ubuntu desktop 16.04 一:测试代码 测试有3个文件:AB.h,AB.c,test.c //AB.h vo ...