面向物件的輪播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個同事，原因就是沒有寫註釋，希望大家可以借鑑哈