<!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. JS —— 轮播图中的缓动函数的封装

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

  5. 原生js轮播图

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

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

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

  7. 第六十八天 js轮播图

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

  8. 原生的js轮播图

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

  9. 手把手原生js轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  10. js轮播图和bootstrap中的轮播图

    js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...

随机推荐

  1. 使用powershell批量添加Keil和IAR的头文件路径

    在Keil和IAR的工程中,为了使文件结构清晰,通常会设置很多的子文件夹,然后将头文件和源文件放在不同的子文件夹中,这样就需要手动添加这些头文件夹的路径.当工程结构非常复杂时,文件夹的数量就非常多,特 ...

  2. javascript 设计模式-----单例模式

    单例模式的意思是只需要实例化某个类一次,它的方法也比较简单,通过判断某个类是否已经被实例化了,再返回该值.可以通过各种方法来实现单例模式,下面我们采取以下这种实现方式: var single = (f ...

  3. Native code on Windows Phone 8(转)

    Windows Phone 8 introduces the ability to use native code to implement Windows Phone. In this sectio ...

  4. Linux mysql 主从复制

    主:192.168.246.130 从:192.168.246.131 主配制:my.conf server_id log-bin=mysql-bin binlog-format=mixed 从配制: ...

  5. ORACLE快速彻底Kill掉的会话(转载)

    转载:http://www.cnblogs.com/kerrycode/p/4034231.html 在ORACLE数据库当中,有时候会使用ALTER SYSTEM KILL SESSION 'sid ...

  6. 在Linux中设置共享目录

    1.  是否安装了samba服务 sudo apt-get install samba sudo apt-get install smbfs 2.  创建需要共享的目录/ home/usr/share ...

  7. thinkphp获取特定字段的两种方法

    thinkphp getField( )和field( ) 2014年10月05日 ⁄ 综合 ⁄ 共 1509字 ⁄ 字号 小 中 大 ⁄ 评论关闭 做数据库查询的时候,比较经常用到这两个,总是查手册 ...

  8. 安卓 LayoutInflater参数作用

    方法重载1 public View inflate (int resource, ViewGroup root, boolean attachToRoot) 方法重载2 public View inf ...

  9. 基于Bresenham和DDA算法画线段

    直线:y=kx+b 为了将他在显示屏上显示出来,我们需要为相应的点赋值,那么考虑到计算机的乘法执行效率,我们肯定不会选择用Y=kx+b这个表达式求值,然后进行画线段. 我们应当是将它转化为加法运算. ...

  10. Google代码规范

    文件名 文件名须全部小写,下划线(_)和短横线(-) 源文件采用 UTF-8 编码. 非空代码块:K&R 风格 左花括号不另起新行 左花括号后紧跟换行 右花括号前需要换行 如果右花括号结束了语 ...