面向对象的轮播js
1.自执行函数的前后要加分号
案例：
;(function(){})();
2.面向对象的最大优势节省了许多内存
正式开写面向对象的轮播；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>面向对象的轮播</title>
<style>
.slide{
width:600px;
height:400px;
margin:100px auto;
position:relative;
}
.slide>div{
width:600px;
height:400px;
display:none;
}
.slide>div:nth-of-type(1){
display:block;
}
img{
width:100%;
height:100%;
}
button{
width:40px;
height:40px;
border:none;
position:absolute;
}
button:nth-of-type(1){
top:50%;
left:0;
}
button:nth-of-type(2){
top:50%;
right:0;
}
ul,ol{
list-style:none;
position:absolute;
bottom:20px;
left:30%;
}
ul>li{
width:20px;
float:left;
height:20px;
margin-right:10px;
background:#ccc;
border-radius:50%;
}
ul>li:nth-of-type(1){
background:red;
}
</style>
</head>
<body>
<div id="slide" class="slide">
<div><img src="img/1.jpg" /></div>
<div><img src="img/2.jpg" /></div>
<div><img src="img/3.jpg" /></div>
<button><</button>
<button>></button>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script>
var slide=document.getElementById("slide");
function Person(obj){
this.obj=obj;
//this指向实例对象
//实例的属性，获取slide下所有的div
this.divs=this.obj.getElementsByTagName("div");
//实例的属性，获取slide下所有的按钮，用来切换图片
this.bth=this.obj.getElementsByTagName("button");
//实例的属性，获取slide下所有的小圆点，用来点击
this.lis=this.obj.getElementsByTagName("li");
//设置用来开启定时器的实例属性
this.t=null;
//设置一个属性，让其功能的索引匹配；
this.num=0;
}
Person.prototype={
//开辟新的空间时会将原内存销毁，constructor就会消失
constructor:Person,
//开启一个定时器的方法；
ding:function(){
//每次开启定时器时，先清掉定时器
clearInterval(this.t)
//定时器的this都指向window，利用bind的写法，将定时器的window换成实例对象
this.t=setInterval(this.qie.bind(this),1000)
return this //返回实例对象 实现链式写法
},
//定时器方法中用来切换图片的；
qie:function(){
//让定时器运动
this.num++
//如果图片走完，从第一张继续走
if(this.num>this.divs.length-1){
this.num=0
}
//通过for循环的目的，就是让所有的图片隐藏起来，只让他对应的索引显示出来
for(var i=0;i<this.divs.length;i++){
this.divs[i].style.display="none";
this.lis[i].style.background="#ccc";
}
//通过索引知道是具体的第几个div（图片）显示出来
this.divs[this.num].style.display="block"
//通过索引知道是具体的第几个小圆点变成红色
this.lis[this.num].style.background="red"
},
//当鼠标悬浮时关闭定时器的方法；
over:function(){
//this指向实例对象
this.obj.onmouseover=function(){
//this指向this.obj
clearInterval(this.t) //this受到了影响，所以用bind
}.bind(this)
//在返回实例对象，用于链式写法
return this
},
//当鼠标离开时，在次开启定时器
out:function(){
//this指向实例对象
this.obj.onmouseout=function(){
//this指向this.obj
//当开启定时器时，先关闭定时器
clearInterval(this.t)
//当鼠标离开时，继续开启定时器
this.t=setInterval(this.qie.bind(this),1000) //this冲突，要让this指向实例对象用window
}.bind(this)
return this //返回实例对象，用于链式写法
},
//按钮的事件
bthclick:function(){
// this指向实例对象
//左按钮的点击事件
this.bth[0].onclick=function(){
// this指向this.bth[0]
//从最后一张往前切换
this.num--
if(this.num<0){
this.num=2
}
//利用for循环将其余的图片及按钮隐藏掉，默认色
for(var i=0;i<this.divs.length;i++){
this.divs[i].style.display="none";
this.lis[i].style.background="#ccc";
}
//利用索引将想得到的图片及按钮显示出来
this.divs[this.num].style.display="block";
this.lis[this.num].style.background="red";
//this指向this.bth[0]。想让this指向实例对象，用bind
}.bind(this);
this.bth[1].onclick=function(){
// this指向this.bth[0]
//从最后一张往前切换
this.num++
if(this.num>2){
this.num=0
}
//利用for循环将其余的图片及按钮隐藏掉，默认色
for(var i=0;i<this.divs.length;i++){
this.divs[i].style.display="none";
this.lis[i].style.background="#ccc";
}
//利用索引将想得到的图片及按钮显示出来
this.divs[this.num].style.display="block";
this.lis[this.num].style.background="red";
//this指向this.bth[0]。想让this指向实例对象，用bind
}.bind(this)
//用链式写法，所以将实例对象返回
return this;
},
//圆点的点击按钮事件
yuan:function(){
//因为事件中的点击需要用到this，所以不能用bind,只能提前声明一个this
var that=this;
//利用for循环得到原点的事件；
for(var i=0;i<this.lis.length;i++){
//添加一个索引的属性
this.lis[i].index=i;
this.lis[i].onclick=function(){
//that代表实例对象，this代表 this.lis[i]
//通过for循环将图片隐藏和原点的默认原色
for(var j=0;j<that.lis.length;j++){
that.lis[j].style.background="#ccc";
that.divs[j].style.display="none";
}
//将点击的原点颜色变红，图片显示出来
this.style.background="red";
that.divs[this.index].style.display="block";
//将num和圆点点击后的索引匹配
that.num=this.index;
}
}
return this;
}
}
var lunbo=new Person(slide)
lunbo.ding().over().out().bthclick().yuan()
</script>
曾经美国有个案例：某公司一个程序员枪击了他的4个同事，原因就是没有写注释，希望大家可以借鉴哈
面向对象的轮播js的更多相关文章
- 网站图片的轮播JS代码
这是几个网站的轮播JS效果,实现图片按照时间来切换,目前有几个站实现该功能,特别是浴室柜网站改版前,以下就是JS具体内容可以自己改下路径就可以用的linkarr = new Array();picar ...
- js轮播功能 标签自动切换 同页面多轮播js
需要加入jquery 1.43及以上版本 下面还有个简单版,一个页面只支持一个轮播 同页面多轮播js <div> <div class="yt_content"& ...
- 简单的音乐轮播JS
首先说明一点,此篇文章只是为了回应一些博友的要求,本人并非专业搞js的,所以键盘侠和各路大神如果看到此文还请轻喷或者可以直接关掉页面~ 直接上代码: <div id="myboot&q ...
- 仿主题广告轮播js
function SlideShow(c) { var a = document.getElementById("slide"); var f = document.getElem ...
- JS 基于面向对象的 轮播图1
---恢复内容开始--- 1 'use strict' 2 function Tab(id){ 3 if(!id)return; 4 this.oBox = document.getElementBy ...
- JS 基于面向对象的 轮播图2
<script> // 函数不能重名, --> 子函数 // is defined function --> 函数名是否写错了 function AutoTab(id) { T ...
- 简单轮播js实现
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" ...
- 图片轮播 js代码
<script type="text/javascript"> //图片轮换 $(function () { //------------------ var sWid ...
- 大图轮播js
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
随机推荐
- C++学习（九）（C语言部分）之 项目 推箱子游戏
游戏制作 推箱子 步骤分析 1.模板 2.模板分析 组成元素: 空地 墙 人 目的地 箱子 背景 3.如何操作 通过WASD键盘操作人,推着箱子,到达目的地,游戏结束,如果箱子卡在死角则游戏失败 4. ...
- 【HDOJ4857】【反向拓扑排序】
http://acm.hdu.edu.cn/showproblem.php?pid=4857 逃生 Time Limit: 2000/1000 MS (Java/Others) Memory L ...
- loading加载的代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- day16 Hbase day17
这个HBase学习了第二遍也不是太透彻PS:启动Hbase之前先启动Zookeeper.HDFS.yarn 1. hbase简介(是基于HDFS.相当于是一个缓存层) 1.1. 什么是hbase(列式 ...
- hfrk2410_a1.1开发板移植linux-2.6.32.27--网卡篇(cs8900)
硬件:恒丰锐科开发板hfrk2410_A1.1 软件:linux-2.6.32.27 cs8900网卡移植: 将cs8900驱动源代码文件拷贝至drivers/net/,修改drivers/net/K ...
- MySQL--Checkpoint基础
===================================================== Checkpint 分两种:Sharp Checkpoint : 在服务器正常关闭时,将所有 ...
- promise对象的回调函数resolve的参数为另一个promise对象
/*如果调用resolve函数和reject函数时带有参数,那么它们的参数会被传递给回调函数. reject函数的参数通常是Error对象的实例,表示抛出的错误: resolve函数的参数除了正常的值 ...
- mysql查看某库表大小
查询所有数据库占用磁盘空间大小的SQL语句: 语句如下 select TABLE_SCHEMA, concat(truncate(sum(data_length)/1024/1024,2),' MB' ...
- Zabbix-2.4-安装-1
前言 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix组件主要分两个: zabbix-server和zabbix-agent.支持的监控协议有I ...
- create-react-app 知识点
用 create-react-app 创建项目时,最好FQ:否则有些安装包会安装不上,报超时错误. create-react-app 创建的项目,执行yarn eject后,按需引入antd的2种方式 ...