面向對象的輪播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