JS面向对象轮播图实现

最新推荐文章于 2022-02-08 14:33:29 发布

羽湘楚

最新推荐文章于 2022-02-08 14:33:29 发布

阅读量1.7k

点赞数 1

文章标签：前端 html 面向对象对象 javascript

本文链接：https://blog.csdn.net/weixin_38337068/article/details/73927809

版权

在这里只是把实现代码写出来，需要深入讨论交流的加微信 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.οnlοad=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.οnmοuseοver=function(){//鼠标移入关掉定时器
// clearInterval(tis);
// }
// pci.οnmοuseοut=function(){//鼠标移出时启动定时器
// tis=setInterval(kk,1000);
// }
//
// left.οnclick=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.οnclick=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.οnmοuseοver=function(){//鼠标移入关掉定时器调用下面的调用下面的原型方法
clearInterval(_this.tis);
}
this.pci.οnmοuseοut=function(){//鼠标移出时启动定时器调用下面的原型方法
_this.tis=setInterval(function(){
_this.kk();
},1000);
}

this.left.οnclick=function(){//点击上一张图片调用下面的原型方法
_this.left1();
}

this.right.οnclick=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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS面向对象轮播图实现

在这里只是把实现代码写出来，需要深入讨论交流的加微信 ni461586842*{margin: 0;padding: 0;}#pci{width: 400px;height: 400px;margin: 50px auto;position: relative;overflow: hidden;}ul{position: ab
复制链接

扫一扫