<!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. Android——例子：屏幕切换

    效果图如下:                          Xml文件代码: <?xml version="1.0" encoding="utf-8" ...

  2. iOS案例：读取指定目录下的文件列表

    // // main.m // 读取指定目录下的文件列表 // // Created by Apple on 15/11/24. // Copyright © 2015年 Apple. All rig ...

  3. ubuntu12.04 gdb安装使用

    参考文档:http://blog.csdn.net/haoel/article/details/2879 http://www.programlife.net/gdb-manual.html [新手笔 ...

  4. java乱码问题（转）

    参考: http://blog.csdn.net/beijiguangyong/article/details/7414247 http://www.zhihu.com/question/202126 ...

  5. [转载] 构建微服务：使用API Gateway

    原文: http://mp.weixin.qq.com/s?__biz=MzA5OTAyNzQ2OA==&mid=206889381&idx=1&sn=478ccb35294c ...

  6. IO端口、IO内存、IO空间、内存空间的含义和联系

    1,IO空间:X86一个特有的空间,与内存空间独立的空间,同样利用IO空间可以操作数据,只不过是利用对应的IO端口操作函数,例如inb(), inbw(), inl(); outb(), outw() ...

  7. poj3714Raid(平面最近点对）

    链接 模板 稍加一点标记 模板 #include <iostream> #include<cstdio> #include<cstring> #include< ...

  8. Java可变参数 & Python可变参数 & Scala可变参数

    Java 可变参数的特点: (1).只能出现在参数列表的最后: (2)....位于变量类型和变量名之间,前后有无空格都可以: (3).调用可变参数的方法时,编译器为该可变参数隐含创建一个数组,在方法体 ...

  9. Android GestureDetector方法详解

    为了加强点击.拖动响应事件,Android提供了GestureDetector手势识别类.通过GestureDetector.OnGestureListener来获取当前被触发的操作手势(Single ...

  10. hdu1907(anti-sg入门)

    改变了下规则,现在变成了最后拿的人输. 如果对于单纯的nim的话,只需要判断每堆都是1个石子的特殊情况. 因为如果存在有大于1个石子的堆话,类似于nim的取法,处于必胜状态的一方只需要在 对方取完后只 ...