<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="content-type" charset="utf-8" />

    <meta http-equiv="content-type" content="text/html" />

    <title>demo</title>

</head>

<style type="text/css">

    *{margin:0;padding:0;}

    ul,li,img{margin:0;padding:0;border:0;list-style-type:none;}

    #list{height:250px;list-style-type:none;overflow:hidden;}

    #luanpo{max-width:600px;height:200px;border:1px solid #CCC;margin:0 auto;position:relative;overflow:hidden;}

    #imgs li{float:left;height:200px;width:600px;}

    #imgs{height:200px;background:#ddd;position:absolute;}

    .a{background:red;}

    .b{background:yellow;}

    #num{overflow:auto;position:absolute;right:0;bottom:0;}

    #num li{float:left;height:30px;width:30px;text-align:center;line-height:30px;border:1px solid #CCC;margin-left:10px;cursor:pointer;z-index:2222;}

</style>

<body>

<div id="luanpo">

    <ul id="imgs">

        <li>a</li>

        <li>b</li>

        <li>c</li>

        <li>d</li>

    </ul>

    <ul id="num">

        <li class="a">1</li>

        <li class="b">2</li>

        <li class="b">3</li>

        <li class="b">4</li>

    </ul>

</div>

<script type="text/javascript">

    var imgs=document.getElementById('imgs').getElementsByTagName('li');

    var nums=document.getElementById("num").getElementsByTagName("li");

    var luanpo=document.getElementById("luanpo");

    var oimg=document.getElementById('imgs');

    var iNow=0;

    var dt=null;

    oimg.style.width=imgs.length*imgs[0].offsetWidth+"px";

    function tab(){

        for(var i=0;i<nums.length;i++){

            nums[i].index=i;

            nums[i].onclick=function(){

                clearInterval(dt);

                iNow=this.index;

                for(var i=0;i<nums.length;i++){

                    nums[i].className="b";

                }

                this.className="a";

                oimg.style.left=-(imgs[0].offsetWidth*iNow)+"px";    //这边可以加上我前面所写的那个缓动框架

            }

            nums[i].onmouseout=function(){

                start();

            }

        }

    }

    function start(){

    　　clearInterval(dt);

        dt=setInterval(function(){

            if(iNow>nums.length-2){

                iNow=0;

            }else{

                iNow++;

            }

            for(var k=0;k<nums.length;k++){

                if(iNow==nums[k].index){nums[k].className='a';}else{nums[k].className='b';}

            }

            oimg.style.left=-(imgs[0].offsetWidth*iNow)+"px";    //这边可以加上我前面所写的那个缓动框架

        },3000);

        tab();

    }

    start();

</script>

</body>

</html>

js-轮播图的更多相关文章

  1. JavaScript的案例（数据校验，js轮播图，页面定时弹窗）

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  2. 纯js轮播图练习-2，js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  3. 纯js轮播图练习-1

    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...

  4. javascript原生js轮播图

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

  5. JS轮播图（网易云轮播图）

    JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...

  6. JS —— 轮播图中的缓动函数的封装

    轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...

  7. 原生js轮播图

    //用原生js实现了一个简单的轮播图效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  8. 用require.js封装原生js轮播图

    index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...

  9. 第六十八天 js轮播图

    1.浮动与定位结合使用 浮动与相对定位 //1.两者均参与布局 //2.主浮动布局,相对布局辅助完成布局微调 //3.相对定位布局微调不同于盒模型布局微调,相对定位布局不影响盒子原有位置,就会影响兄弟 ...

  10. 原生的js轮播图

    图片会照常循环播放,当然也可以通过按钮来进行切换,当切出当前的页面时,等到你在回到当前页面时该轮播的图片还是停留在你之前所切出去的的那张图片的状态. HTML部分: <html> < ...

随机推荐

  1. 什么是MongoDB、特点、历史、下载和工具

    什么是MongoDB ?MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.在高负载的情况下,添加更多的节点,可以保证服务器性能.MongoDB 旨在为WEB应用提供可扩展 ...

  2. Nginx stream（TCP/UDP）负载均衡

    Nginx-1.11.6编译安装 nginx编译安装,(平台:ubuntu 14.04); sudo apt-get install zlib1g-dev sudo apt-get install l ...

  3. crontab 实现定时脚本执行完毕再执行下一次

    0 4 * * 1 flock -xn /tmp/oneSendTemp.lock -c /home/check_a/h_demand.sh > /dev/null 2>&1

  4. java 文件下载支持中文名称

    /** * 文件下载 * @param filePath 文件路径 * @param fileName 文件名称 */ public void download(String filePath,Str ...

  5. SVN版本控制的使用

    下面说一说本人对SVN工具使用的理解: SVN就是一个工具,一个用来便于多人(或说团队)开发代码的版本控制工具,我们可以用它很好的把多个程序员开发出来的代码统一起来,并且保证在这个工程中不出现任何差错 ...

  6. CUDA开发时用到的各种Linux命令

    cat 读取文件中的全部内容. 例:cat cuda_add.cu

  7. android应用编译失败 ResXMLTree_node size 类错误，以及 android studio 项目内搜索

    今天很郁闷,又遇到个很让人崩溃的问题: ResXMLTree_node size 0 is smaller than header size 0x45. 类似这样的错误,提示中看不出任何有用的内容,网 ...

  8. USACO 3.3 TEXT Eulerian Tour中的Cows on Parade一点理解

    Cows on Parade Farmer John has two types of cows: black Angus and white Jerseys. While marching 19 o ...

  9. hibernate_@GeneratedValue

    JPA通用策略生成器  通过annotation来映射hibernate实体的,基于annotation的hibernate主键标识为@Id,  其生成规则由@GeneratedValue设定的.这里 ...

  10. openstack私有云布署实践【9.3 主从controller单向同步glance-image目录】

    采用Rysnc单向同步,而不用双方实时同步,原因是在历史的运行过程中,我们发现,有些镜像包太大,当在主用的glance将镜像保存时,并不是一时半会就把镜像保存好,当主用在保存时,备用节点又在实时同步那 ...