<!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. Robot Framework使用技巧

    1.变量的使用 变量可以在命令行中设置,个别变量设置使用--variable (-v)选项,变量文件的选择使用--variablefile (-V)选项.通过命令行设置的变量是全局变量,对其所有执行的 ...

  2. js Checkbox 传递多个值给后台

    ------前台JS "<input class=\'jTabCheck2\' type=\'checkbox\' partvguid=" + obj + " pr ...

  3. jquery ColorPicker 颜色选择器

    $(function() { $('#colorpickerField').ColorPicker({ onSubmit: function(hsb, hex, rgb, el) { $(el).va ...

  4. js中角度计算

    -. js 关于三角函数算法  弧度 和 角度的理解, 以及相互转换   角的两种单位 度 和 弧      1.弧度的定义       我们知道"度"的定义是,"两条射 ...

  5. GC（垃圾回收）

    Java程序的内存分配和回收都是由JRE在后台自动进行的.JRE会负责回收那些不再使用的内存,这种机制被称为垃圾回收GC.通常JRE会提供一条超级线程来进行检测和控制,一般都是在CPU空闲或内存不足时 ...

  6. HTML5学习总结——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  7. [MFC美化] SkinMagic使用详解3- 常见使用问题解答

    在SkinMagic使用过程中,经常遇到以下几个问题: 1. 静态加载皮肤文件时,资源文件IDR_SKIN_CORONA可能会报错:未声明的标识符 解决方法:添加头文件"Resource.h ...

  8. PDF在线阅读 FlexPaper 惰性加载 ；

    关于PDF在线阅读问题,比较普遍的做法是转换成swf文件来浏览:由于项目需要,就用 flexpaper 来实现了下,功能比较简单:但是文件的惰性加载确实让笔者挠头了一把! 下面是笔者的方法: 采用流的 ...

  9. android获取系统版本号

    应用场景:1.在界面中显示应用程序的版本号:2.用户启动该应用,后台判断该应用是否是最新版本.上述情景都需要在程序中自动获取到应用的版本号. 思路简介:在Android中,应用程序的版本号是在Andr ...

  10. .Net 生成二维码【超简易，仅供学习】

    1,首先下载DotNetBarcode.dll文件 下载地址: http://dl.downyi.com/dotnetbarcode_dll.rar 2,调用方式 string path = @&qu ...