<!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. [C和指针]第三部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. Google's Open Source SLAM Library ---- Cartographer

    What is Cartographer? Google announce the open source release of Cartographer, a real-time simultane ...

  3. SQL - 批量修改表中所有行数据某字段的部分内容

    UPDATE 表名 SET 字段名 = REPLACE (字段名, 'old', 'new');

  4. JS学习笔记（二） 数据类型

    参考资料: 1. http://www.w3school.com.cn/js/js_datatypes.asp 2. http://blog.sina.com.cn/s/blog_85c1dc1001 ...

  5. 常用的邮箱服务器（SMTP、POP3）地址、端口

    常用的邮箱服务器(SMTP.POP3)地址.端口 参考网址:http://wenku.baidu.com/link?url=IPv15rPRkd0nsuGH0Dm0A5kFyRaeHJY2_gYpDW ...

  6. Spring的DI(Ioc) - 利用构造器注入

    1: 在给对象提供构造器 public class PersonServiceImpl implements PersonService { private PersonDao personDao; ...

  7. 团队作业Week5之团队贡献分的分配

    一.团队贡献分的分配规则 首先,我们团队共有5个人,平均每个人50分,所以我们团队的总分为5*50=250,我们先把50分分成以下几份: 序号 贡献类型 权重 分数 1 代码贡献 40% 20 * 5 ...

  8. Java中ArrayList相关的5道面试题

    本文参考了 <关于ArrayList的5道面试题 > 1.ArrayList的大小是如何自动增加的? 这个问题我想曾经debug过并且查看过arraylist源码的人都有印象,它的过程是: ...

  9. Jmeter使用之常用函数介绍

    “_csvRead”函数 CsvRead函数是从外部读取参数,CsvRead函数可以从一个文件中读取多个参数. 下面具体讲一下如何使用csvread函数: 1.     新建一个csv或者text文件 ...

  10. 原生js实现的效果

    原生js实现tooltip提示框的效果   在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我 ...