JS面向物件輪播圖實現
阿新 • • 發佈：2019-02-11
// 面對過程寫法
//var pci=document.getElementById('pci');
//var ul=document.getElementById('ul');
//var li=document.getElementsByTagName('li');
//var left=document.getElementsByClassName('left')[0];
//var right=document.getElementsByClassName('right')[0];
//var b=document.getElementsByTagName('b');
//var liw=li[0].offsetWidth;
//var tis=null;
//var i=0;
////定時器
//tis=setInterval(kk,1000);
//b[0].style.backgroundColor='red';
//function kk(){
//b[i].style.backgroundColor='brown';
//i++;
//if(i>4){
//i=0
// }
//ul.style.left=-liw*i+'px';
//b[i].style.backgroundColor='red';
//}
//pci.onmouseover=function(){//滑鼠移入關掉定時器
//clearInterval(tis);
//}
//pci.onmouseout=function(){//滑鼠移出時啟動定時器
//tis=setInterval(kk,1000);
//}
//
//left.onclick=function(e){//點選上一張圖片
//b[i].style.backgroundColor='brown';
//i++;
//if(i>4){
//i=0
// }
//ul.style.left=-liw*i+'px';
//b[i].style.backgroundColor='red';
//}
//
//right.onclick=function(){//點選下一張圖片
//b[i].style.backgroundColor='brown';
//i--;
//if(i<0){
//i=0
// }
//ul.style.left=-liw*i+'px';
//b[i].style.backgroundColor='red';
//}
}
function Lun(id){ //屬性 建構函式（類）：專門構造物件的函式
this.pci=document.getElementById(id);
this.ul=document.getElementById('ul');
this.li=document.getElementsByTagName('li');
this.left=document.getElementsByClassName('left')[0];
this.right=document.getElementsByClassName('right')[0];
this.b=document.getElementsByTagName('b');
this.liw=this.li[0].offsetWidth;
this.tis=null;
this.i=0;
}
Lun.prototype.init=function(){// 原型 方法
var _this=this;
this.kk();
this.pci.onmouseover=function(){//滑鼠移入關掉定時器 呼叫下面的呼叫下面的原型方法
clearInterval(_this.tis);
}
this.pci.onmouseout=function(){//滑鼠移出時啟動定時器 呼叫下面的原型方法
_this.tis=setInterval(function(){
_this.kk();
},1000);
}
this.left.onclick=function(){//點選上一張圖片 呼叫下面的原型方法
_this.left1();
}
this.right.onclick=function(){//點選下一張圖片 呼叫下面的原型方法
_this.right1();
}
this.tis=setInterval(function(){
_this.kk();
},1000);
}
Lun.prototype.kk=function(){ // 原型 方法
this.b[this.i].style.backgroundColor='brown';
this.i++;
if(this.i>4){
this.i=0
}
this.ul.style.left=-this.liw*this.i+'px';
this.b[this.i].style.backgroundColor='red';
}
Lun.prototype.left1=function(){// 原型 方法
this.b[this.i].style.backgroundColor='brown';
this.i++;
if(this.i>4){
this.i=0
}
this.ul.style.left=-this.liw*this.i+'px';
this.b[this.i].style.backgroundColor='red';
}
Lun.prototype.right1=function(){// 原型 方法
this.b[this.i].style.backgroundColor='brown';
this.i--;
if(this.i<0){
this.i=0
}
this.ul.style.left=-this.liw*this.i+'px';
this.b[this.i].style.backgroundColor='red';
}
</script>
</html>
//var pci=document.getElementById('pci');
//var ul=document.getElementById('ul');
//var li=document.getElementsByTagName('li');
//var left=document.getElementsByClassName('left')[0];
//var right=document.getElementsByClassName('right')[0];
//var b=document.getElementsByTagName('b');
//var liw=li[0].offsetWidth;
//var tis=null;
//var i=0;
////定時器
//tis=setInterval(kk,1000);
//b[0].style.backgroundColor='red';
//function kk(){
//b[i].style.backgroundColor='brown';
//i++;
//if(i>4){
//i=0
// }
//ul.style.left=-liw*i+'px';
//b[i].style.backgroundColor='red';
//}
//pci.onmouseover=function(){//滑鼠移入關掉定時器
//clearInterval(tis);
//}
//pci.onmouseout=function(){//滑鼠移出時啟動定時器
//tis=setInterval(kk,1000);
//}
//
//left.onclick=function(e){//點選上一張圖片
//b[i].style.backgroundColor='brown';
//i++;
//if(i>4){
//i=0
// }
//ul.style.left=-liw*i+'px';
//b[i].style.backgroundColor='red';
//}
//
//right.onclick=function(){//點選下一張圖片
//b[i].style.backgroundColor='brown';
//i--;
//if(i<0){
//i=0
// }
//ul.style.left=-liw*i+'px';
//b[i].style.backgroundColor='red';
//}
}
function Lun(id){ //屬性 建構函式（類）：專門構造物件的函式
this.pci=document.getElementById(id);
this.ul=document.getElementById('ul');
this.li=document.getElementsByTagName('li');
this.left=document.getElementsByClassName('left')[0];
this.right=document.getElementsByClassName('right')[0];
this.b=document.getElementsByTagName('b');
this.liw=this.li[0].offsetWidth;
this.tis=null;
this.i=0;
}
Lun.prototype.init=function(){// 原型 方法
var _this=this;
this.kk();
this.pci.onmouseover=function(){//滑鼠移入關掉定時器 呼叫下面的呼叫下面的原型方法
clearInterval(_this.tis);
}
this.pci.onmouseout=function(){//滑鼠移出時啟動定時器 呼叫下面的原型方法
_this.tis=setInterval(function(){
_this.kk();
},1000);
}
this.left.onclick=function(){//點選上一張圖片 呼叫下面的原型方法
_this.left1();
}
this.right.onclick=function(){//點選下一張圖片 呼叫下面的原型方法
_this.right1();
}
this.tis=setInterval(function(){
_this.kk();
},1000);
}
Lun.prototype.kk=function(){ // 原型 方法
this.b[this.i].style.backgroundColor='brown';
this.i++;
if(this.i>4){
this.i=0
}
this.ul.style.left=-this.liw*this.i+'px';
this.b[this.i].style.backgroundColor='red';
}
Lun.prototype.left1=function(){// 原型 方法
this.b[this.i].style.backgroundColor='brown';
this.i++;
if(this.i>4){
this.i=0
}
this.ul.style.left=-this.liw*this.i+'px';
this.b[this.i].style.backgroundColor='red';
}
Lun.prototype.right1=function(){// 原型 方法
this.b[this.i].style.backgroundColor='brown';
this.i--;
if(this.i<0){
this.i=0
}
this.ul.style.left=-this.liw*this.i+'px';
this.b[this.i].style.backgroundColor='red';
}
</script>
</html>