<!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. 【CSS学习笔记】超链接标签

    有些网址后面为什么是#? 比如,href="http://www.xxx.com/index.html/#q2"标示网页index.html的q2位置处,浏览器读取这个URL后,会 ...

  2. 为什么需要DevOps

    过去一年以来,一批来自欧美的.不墨守陈规的系统管理员和开发人员一直在谈论一个新概念:DevOps.DevOps 就是开发(Development) 和运维(Operations)这两个领域的合并.(如 ...

  3. keychain的使用

    通常情况下,我们用NSUserDefaults存储数据信息,但是对于一些私密信息,比如密码.证书等等,就需要使用更为安全的keychain了.keychain里保存的信息不会因App被删除而丢失,在用 ...

  4. Java 并发 线程同步

    Java 并发 线程同步 @author ixenos 同步 1.异步线程本身包含了执行时需要的数据和方法,不需要外部提供的资源和方法,在执行时也不关心与其并发执行的其他线程的状态和行为 2.然而,大 ...

  5. LED的串联电阻值的计算

    与LED串联的电阻被用于控制该LED导通时的电流量.为了计算电阻值,你需要知道输入电源电压(Vs,一般为5V),LED的正向电压(Vf)和你需要流过LED的电源(/)的数值. 其电阻欧姆值的计算公式( ...

  6. string，stringbuilder和stringbuffer的区别

    String.StringBuffer.StringBuilder之间的区别(网上收集) StringBuffer.StringBuilder和String一样,也用来代表字符串.String类是不可 ...

  7. Tiny6410之重定位代码到SDRAM

    在上一章中,将代码重定位到了SRAM中,但是这样的做法作用不大.正确的做法的是将代码重定位到更大的主存中,即DRAM.Tiny6410的DRAM控制寄存器最多只能支持两个同一类型的芯片.每个芯片最多可 ...

  8. c++中string类型可以直接进行比较

    以下代码在Ubuntu14.10下实现 /*------------------------- filename is demo.cpp --------------------------*/ #i ...

  9. Linq 内联左联等

    我们在做SQL查询的时候经常会用到Inner Join,Left Join,笛卡尔积等等,连接方式的概念方面我想也不用给予太多解释, 我们今天的重点是让大家熟悉LINQ是如何使用Join来实现常用的表 ...

  10. Java线程小记

    线程是程序内部不同的执行分支,实现多线程主要有两种方式:继承自Thread类或实现Runnable接口,其实Thread类也是实现了Runnable接口,基于Java的单继承机制,我们建议使用实现Ru ...