面向对象的轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.clearfix:after{
clear: both;
content: "";
height:0;
display: block;
visibility: hidden;
}
.slide{
width: 600px;
height: 400px;
/*border: 1px solid red;*/
margin: 0 auto;
position: relative;
}
.slide>div{
width: 600px;
height: 400px;
display: none;
}
.slide div img{
width: 100%;
height: 100%;
vertical-align: middle;
}
.slide .moren{
display: block;
}
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
.slide button{
position: absolute;
top: 50%;
width: 30px;
height: 40px;
margin-top: -20px;
border: none;
outline: none;
}
.slide .left{
}
.slide .right{
right: 0;
}
.slide .circle{
position: absolute;
bottom: 10px;
left: 50%;
}
.slide .circle li{
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50%;
float: left;
margin-right: 5px;
}
.slide .circle .red{
background: red;
}
</style>
</head>
<body>
<div class="slide">
<div class="moren"><img src="imgs/01.jpg" alt="" /></div>
<div><img src="imgs/02.jpg" alt="" /></div>
<div><img src="imgs/03.jpg" alt="" /></div>
<ul class="circle clearfix" >
<li class="red"></li>
<li></li>
<li></li>
</ul>
<button class="left"><</button>
<button class="right">></button>
</div>
</body>
</html>
<script>
var slide=document.querySelector(".slide");
// var divs=slide.getElementsByTagName("div");
// var btns=slide.getElementsByTagName("button");
// var lis=slide.getElementsByTagName("li");
function MySlide(obj){
this.obj=obj;//最外层的div
this.divs=this.obj.getElementsByTagName("div");
this.btns=this.obj.getElementsByTagName("button");
this.lis=this.obj.getElementsByTagName("li");
// 将里面的子级获取到添加到这个轮播对象的属性上
this.time=null;
this.num=0;
}
MySlide.prototype={
constructor:MySlide,
// 自动轮播
autoplay:function(){
console.log(this)
clearInterval(this.t)
this.t=setInterval(this.slide.bind(this),1000)
// 定时器里的this指向window 需要更改this指向
return this;
},
// 鼠标悬浮上方执行的
over:function(){
this.obj.onmouseover=function(){
console.log(this)
clearInterval(this.t)
}.bind(this)
return this;
},
// 鼠标离开的
out:function(){
this.obj.onmouseout=function(){
this.t=setInterval(this.slide.bind(this),1000)
}.bind(this)
return this;
},
// 点击两端的btn
btnclick:function(){
// this 是实例对象
this.btns[0].onclick=function(){
// 这里面的this是btn[0] 需要更改this指向
this.num--;
if(this.num<0){this.num=2}
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"
}.bind(this);
this.btns[1].onclick=function(){
// 这里面的this是btn[0] 需要更改this指向
this.num++;
if(this.num>2){this.num=0}
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"
}.bind(this);
return this;
},
// 这是三个原点
lisclick:function(){
// this是实例对象
var that=this;//that是实例对象
for(var i=0;i<this.lis.length;i++){
that.lis[i].index=i;
this.lis[i].onclick=function(){
// 这里的this是lis[i]不是实例了
console.log(that)
for(var k=0;k<that.lis.length;k++){
that.lis[k].style.background="#ccc";
that.divs[k].style.display="none"
}
this.style.background="red";
that.divs[this.index].style.display="block";
that.num=this.index;//匹配定时器索引的
}
}
return this;
},
// 自动轮播里的详细内容
slide:function(){
console.log(this)
// console.log(this.divs)
this.num++;
if(this.num>2){
this.num=0
}
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";
},
}
var lunbo=new MySlide(slide)
lunbo.autoplay().over().out().btnclick().lisclick()
// console.log(lunbo)
</script>
