<!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. vim功能使用

    转自:http://blog.csdn.net/xiajun07061225/article/details/7039413 vi与vim vi编辑器是所有Unix及Linux系统下标准的编辑器,他就 ...

  2. JS 和 Java 中URL特殊字符编码方式

    前几天遇到url特殊字符编码的问题,在这里整理一下: JavaScript 1.  编码 escape(String) 其中某些字符被替换成了十六进制的转义序列. 解码 unescape(String ...

  3. ubuntu安装jdk-6u45-linux-x64-rpm.bin

    1. 参考网址: http://www.xuebuyuan.com/2070575.html http://blog.csdn.net/csusunxgg/article/details/895602 ...

  4. C++中关于new及内存地址的思考

    OJ题刷多了,每次都是直接分配内存,那么,你还记得怎么动态分配内存吗? ———————————————————————————————————— 我们知道,使用malloc/calloc等分配内存的函 ...

  5. uva 10692 Huge Mods 超大数取模

    vjudge上题目链接:Huge Mods 附上截图: 题意不难理解,因为指数的范围太大,所以我就想是不是需要用求幂大法: AB % C = AB % phi(C) + phi(C) % C ( B ...

  6. The new day of my blog

    今天开始了我的博客建造之旅,作为一个ACMer(虽说是弱校的),我也想象其他人一样把自己的题解和心得记录下来,一来可以和大家分享一下,二来也可以留给将来的自己作回顾,希望众大神能够给以指导指导,让我这 ...

  7. Eclipse插件Target Management (RSE)

    陶醉篇--Eclipse插件Target Management (RSE),RSE即Remote System Explorer 2008年11月29日 星期六 下午 10:27 Target Man ...

  8. 【转载】Linux系统，设置Oracle开机启动，待整理

    http://www.cnblogs.com/mophee/archive/2013/06/03/3115805.html

  9. 转：SQL的内连接与外连接

    参考:http://www.cuiyongjian.com/post-130.html 在oracle的SQL语句常用的连接有内连接(inner join),外连接(outer join)等,内连接又 ...

  10. 一次DB2数据库连接失败（SQLSTATE=08001）的解决方法

    有一次,在使用DbVisualizer工具连接自己linux虚拟机上的DB2数据库时,报如下错误: Product: DbVisualizer Pro 9.1 Build: #2050 (2013/0 ...