JS面向对象轮播图实现

来源：互联网发布：安徽经济网络电视台编辑：程序博客网时间：2024/06/05 11:39

在这里只是把实现代码写出来，需要深入讨论交流的加微信 ni461586842

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#pci{
width: 400px;
height: 400px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
ul{
position: absolute;
left: 0;
width: 2000px;
height: 400px;
transition: 1s;
}
li{
width: 400px;
height: 400px;
float: left;
list-style: none;
}
img{
width: 400px;
height: 400px;
display: block;

}
p{
width: 100px;
height: 15px;
position: absolute;
bottom: 10px;
right: 20px;

}
b{
display: block;
float: left;
margin-right: 5px;
width: 10px;
height: 10px;
border-radius: 10px;
background: brown;
}
.left{
display: block;
width: 30px;
position: absolute;
top: 150px;
left: 10px;
background: lawngreen;
}
.right{
display: block;
width: 30px;
position: absolute;
top: 150px;
right:10px;
background: lawngreen;
}
</style>
</head>
<body>
<div id="pci">
<div>
<ul id="ul">
<li><img src="1.jpg"/></li>
<li><img src="2.jpg"/></li>
<li><img src="3.jpg"/></li>
<li><img src="4.jpg"/></li>
<li><img src="5.jpg"/></li>
</ul>
<p><b></b><b></b><b></b><b></b><b></b></p>
</div>
<span class="left">上一张</span>
<span class="right">下一张</span>
</div>
</body>
<script>
window.onload=function(){ //对象实例

var box=new Lun('pci');
box.init();

// 面对过程写法
// 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>

阅读全文

1 0