面向对象的轮播js
Posted Web引领者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面向对象的轮播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的主要内容，如果未能解决你的问题，请参考以下文章