<!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. Linux实战教学笔记09:通配符

    第九节 通配符 标签(空格分隔): Linux实战教学笔记 ---更多详细资料请点我查看 第1章 回顾特殊符号 | #管道符,或者(正则) > #输出重定向 >> #输出追加重定向 ...

  2. sass---Sass混合宏、继承、占位符

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

  3. [前端性能提升]--图片转化为base64

    图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址 意义:网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites 技术 ...

  4. 关于map()与filter()

    def f1(a): if a == 3: pass else: return a*a li = [1,2,3,4] for i in filret(f1,li) print(i) def f1(a) ...

  5. CrashMe分析教程1 - BreakPoint

    首先,谢谢 Robert Kuster 为我们提供了这么好的CrashMe项目. 很多人想寻找一个CrashMe分析的教程, 我也想要, 但是似乎网络里没有, 所以我就决定用业余时间写一个小系列来共享 ...

  6. CentOS+OpenCV图像的读入、显示

    以管理员身份运行su root输入密码 定位到自己的桌面目录 gedit 1.cpp 编辑内容 #include<opencv2/opencv.hpp>using namespace cv ...

  7. B+树概念学习

    转载自 从B树.B+树.B*树谈到R 树 1.用阶定义的B树 B 树又叫平衡多路查找树.一棵m阶的B 树 (注:切勿简单的认为一棵m阶的B树是m叉树,虽然存在四叉树,八叉树,KD树,及vp/R树/R* ...

  8. sort vector - leetcode 新用法

    179. Largest Number sort(num.begin(), num.end(), [](int a, int b){ return to_string(a)+to_string(b) ...

  9. Win10下Mysql5.7.13,解压版安装流程

    一.环境变量配置 1.将下载好的压宿包解压到安装目录,我的安装目录就是:D:\DevelopmentTool\Mysql5.7.13\mysql-5.7.13-winx64 2.鼠标选择计算机右键,点 ...

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

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