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

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

  6. 原生js轮播图

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

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

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

  8. 第六十八天 js轮播图

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

  9. 原生的js轮播图

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

  10. 手把手原生js轮播图

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

随机推荐

  1. spark 笔记

    官网 http://spark.apache.org/ 安装:http://dblab.xmu.edu.cn/blog/spark-quick-start-guide/ 教程 http://www.c ...

  2. Bootstrap3.0学习第二十一轮(JavaScript插件——工具提示)

    详情请查看http://aehyok.com/Blog/Detail/27.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

  3. 使用Spring框架的12个开源项目

    使用Spring框架的12个开源项目 http://www.csdn.net/article/2013-10-14/2817176-open-source-projects-that-use-spri ...

  4. 通过Java SE 7自带的监控服务(WatchService API)实现类似.NET FileWatcher的功能

    Java SE 7 Tutorial中增加了一个监控目录变更情况的示例,用于介绍其新发布的WatchService API. 但对于用惯了.NET FileWatcher的用户而言,如果用于项目我认为 ...

  5. ASP.NET Core 下的依赖注入(一)

    本文介绍利用 Microsoft.Extensions.Configuration.Binder.dll 来实现超级简单的注入. 1. appsettings.json 中定义配置 假设我们有如下配置 ...

  6. js查询参数

    /*参数查询*/ function GetQueryString(name){ var reg = new RegExp("(^|&)" + name + "=( ...

  7. sqlserver with(nolock)

    所有Select加 With (NoLock)解决阻塞死锁 在查询语句中使用 NOLOCK 和 READPAST 处理一个数据库死锁的异常时候,其中一个建议就是使用 NOLOCK 或者 READPAS ...

  8. unity中Event Trigger组件应用代码

    using UnityEngine; using System.Collections; using UnityEngine.Events; using UnityEngine.EventSystem ...

  9. Linux C++开发学习(一)

    一.简单输出 简单的小程序 1.安装g++ sudo install g++ 2.编写c++程序,helloworld.cpp #include<iostream> using names ...

  10. 在同一台电脑部署多个Tomcat服务

    背景:公司的项目使用的是jdk1.6,Tomcat7.0,比较旧,打算建一些测试项目用jdk1.8,Tomcat9.0. 参考了网上几篇文章 http://dong-shuai22-126-com.i ...