<!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. SQL Server存储过程同时返回分页结果集和总数

    前言 好长时间没摸数据库了,周末在家写了个报表的存储过程,一时间对使用存储过程实现分页的同时并计算出记录总数不知道怎么更好的去实现.按照我们正常的业务逻辑,存储过程数据首先是分页,其次接受若干查询条件 ...

  2. 使用redis缓存数据需要注意的问题以及个人的一些思考和理解

    之前我有博客也尝试过使用redis,在实际的项目中确实作用挺大的.至少对于数据的频繁读取来说都起着至关重要的作用. 但是随着技术的学习,慢慢的业务要复杂起来,以后也许会用到redis集群,所以在这边查 ...

  3. USACO 3.4 Raucous Rockers

    Raucous Rockers You just inherited the rights to N (1 <= N <= 20) previously unreleased songs ...

  4. 明天opp￥this xuexi 资料在高中一班

    明天opp￥this xuexi 资料在高中一班

  5. Oracle笔记（1） 简单查询、限定查询、数据的排序

    Oracle笔记(四) 简单查询.限定查询.数据的排序   一.简单查询 SQL(Structured Query Language) 结构化查询语言,是一种数据库查询和程序设计语言,用于存取数据以及 ...

  6. fiddler还是浏览器的问题

    当我在浏览器里输入http://localhost/infomanage/price?cityid=1&cateid=246&timer=3 后端接收的参数是timer的时候,浏览器会 ...

  7. Spring in Action --- 第二章 装配Bean

    Spirng配置的可选方案 在XML中进行显示配置 在Java中进行显示配置 隐式的bean发现机制和自动装配 bean装配 1. 在希望被扫描到的类上加注解 @Component 2. 基于不同的配 ...

  8. centos7配置开启无线网卡，重启防火墙

    centos7配置无线网卡: 在虚拟机为nat的网络连接下(就是默认的那个),centos7默认网卡未激活. 可以设置 文件 /etc/sysconfig/network-scripts/ifcfg- ...

  9. openstack私有云布署实践【10.2 计算nova - controller节点配置（办公网环境）】

    一.首先登录controller1创建nova数据库,并赋于远程和本地访问的权限.     mysql -u root -p   CREATE DATABASE nova; GRANT ALL PRI ...

  10. 3-Dom

    HTML DOM 对象DOM DocumentDOM ElementDOM AttributeDOM Event Document对象 每个载入浏览器的 HTML 文档都会成为 Document 对象 ...