面向对象demo
tab切换图
<style>
.tab{
width: 500px;
height: 300px;
border: 1px solid #000;
margin: 50px auto;
}
.tab ul, .tab ol{
list-style: none;
padding: 0;
margin: 0;
}
.tab ul{
width: 100%;
height: 50px;
background-color: #ccc;
display: flex;
justify-content: space-around;
align-items: center;
}
.tab ul li{
width: 100px;
height: 30px;
background-color: pink;
text-align: center;
line-height: 30px;
}
.tab ul li.active{
background-color: #0f0;
color: #fff;
font-weight: bold;
}
.tab ol{
width: 100%;
height: 250px;
}
.tab ol li{
display: none;
}
.tab ol li.active{
display: block;
}
.tab ol li a img{
width: 500px;
height: 250px;
}
.tab{
cursor: pointer;
}
</style>
<body>
<div class="tab">
<ul>
<li class="active">城市</li>
<li>花田</li>
<li>郁金香</li>
</ul>
<ol>
<li class="active">
<a href="">
<img src="./images/1.webp" alt="">
</a>
</li>
<li>
<a href="">
<img src="./images/2.webp" alt="">
</a>
</li>
<li>
<a href="">
<img src="./images/3.webp" alt="">
</a>
</li>
</ol>
</div>
</body>
<script>
// 1.定义一个空构造函数
function Tab() {
// 3.获取所有要操作的标签 - 作为对象的属性
this.ulis = document.querySelectorAll('.tab ul li');
this.olis = document.querySelectorAll('.tab ol li');
}
// 4.将事件放在一个方法中去绑定
Tab.prototype.init = function() {
// 绑定事件
// console.log(this.ulis);
for(let i=0; i<this.ulis.length; i++) {
// 为了能让事件函数中的this跟外面的this表示同一个对象，将事件函数换成箭头函数
this.ulis[i].onclick = () => {
// console.log(this);
// console.log(this.ulis);
for(var j=0; j<this.ulis.length; j++) {
this.ulis[j].className = this.olis[j].className = ''
}
this.ulis[i].className = this.olis[i].className = 'active'
}
}
}
// 2.new调用
var t = new Tab()
console.log(t);
t.init()
// 注意：每次在使用的this的时候，一定要先输出确保是我们需要的this再使用
轮播图
<style>
.carousel{
width: 500px;
height: 250px;
border: 1px solid #000;
margin: 50px auto;
position: relative;
overflow: hidden;
cursor: pointer;
}
.carousel ul,.carousel ol{
list-style: none;
padding: 0;
margin: 0;
}
.carousel ul li a img{
width: 500px;
height: 250px;
}
.carousel ul li{
display: none;
}
.carousel ul li.active{
display: block;
}
.carousel ol{
width: 60px;
height: 20px;
background-color:rgba(255,255,255,.8);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
border-radius: 10px;
}
.carousel ol li{
width: 10px;
height: 10px;
border-radius: 50%;
margin: 5px;
float: left;
background-color: #0f0;
}
.carousel>a{
text-decoration: none;
color: #fff;
background-color: rgba(255,255,0,.8);
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
font-weight: bold;
font-size: 30px;
}
.carousel>a.leftBtn{
left: -15px;
}
.carousel>a.rightBtn{
right: -15px;
}
.carousel ol li.active{
background-color: #f00;
}
</style>
<body>
<!-- 1.布局 -->
<div class="carousel">
<ul>
<li class="active">
<a href="">
<img src="./images/1.webp" alt="">
</a>
</li>
<li>
<a href="">
<img src="./images/2.webp" alt="">
</a>
</li>
<li>
<a href="">
<img src="./images/3.webp" alt="">
</a>
</li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
</ol>
<a class="leftBtn" href=""><</a>
<a class="rightBtn" href="">></a>
</div>
</body>
<script>
// 使用面向对象的语法实现轮播图 - 一个对象
// 1.空构造函数
function Carousel() {
// 3.获取标签作为对象的属性
this.container = document.querySelector('.carousel');
this.leftBtn = document.querySelector('.carousel>a.leftBtn');
this.rightBtn = document.querySelector('.carousel>a.rightBtn');
this.ulis = document.querySelectorAll('.carousel ul li');
this.olis = document.querySelectorAll('.carousel ol li');
// 以前我们要定义在全局变量是为了让多个局部共用同一个数据。现在换成面向对象写法后，就需要将这种数据放在对象的属性上，保证在多个方法中可以共用一个数据
this.index = 0
this.timer = null
}
// 4.单独做一个方法去绑定事件
Carousel.prototype.init = function() {
// 为了能让事件函数中使用到外面的this - c对象变量，将这个地方的this赋值给that
var that = this
// 右箭头点击
// console.log(222, this);
this.rightBtn.onclick = function() {
// console.log(333, this);
that.index++
// 判断最大值
if(that.index === that.ulis.length) {
that.index = 0
}
// console.log(that.index);
// 去掉所有的active类名
for(var i=0; i<that.ulis.length; i++) {
that.ulis[i].className = that.olis[i].className = ''
}
// 给当前下标对应的li添加active
that.ulis[that.index].className = that.olis[that.index].className = 'active'
return false
}
// 左箭头点击
this.leftBtn.onclick = function() {
// console.log(333, this);
that.index--
// 判断最大值
if(that.index < 0) {
that.index = that.ulis.length - 1
}
// console.log(that.index);
// 去掉所有的active类名
for(var i=0; i<that.ulis.length; i++) {
that.ulis[i].className = that.olis[i].className = ''
}
// 给当前下标对应的li添加active
that.ulis[that.index].className = that.olis[that.index].className = 'active'
return false
}
// 小圆点点击
for(let j=0; j<this.olis.length; j++) {
this.olis[j].onclick = function() {
that.index = j
for(var i=0; i<that.ulis.length; i++) {
that.ulis[i].className = that.olis[i].className = ''
}
// 给当前下标对应的li添加active
that.ulis[that.index].className = that.olis[that.index].className = 'active'
}
}
// 移出事件
this.container.onmouseout = () => {
this.timer = setInterval(() => { // 为了能让定时器中的this跟外面的this保持一致，将匿名函数换成箭头函数
// console.log(this);
this.rightBtn.onclick()
}, 1000)
}
}
Carousel.prototype.auto = function() {
// 自动轮播 - 用index
this.timer = setInterval(() => { // 为了能让定时器中的this跟外面的this保持一致，将匿名函数换成箭头函数
// console.log(this);
this.rightBtn.onclick()
}, 1000)
// 移入
this.container.onmouseover = () => {
clearInterval(this.timer)
}
}
// 2.new他
var c = new Carousel()
console.log(c);
c.init()
c.auto()
</script>
轮播图封装函数的办法
<style>
.carousel{
width: 500px;
height: 250px;
border: 1px solid #000;
margin: 50px auto;
position: relative;
overflow: hidden;
cursor: pointer;
}
.carousel ul,.carousel ol{
list-style: none;
padding: 0;
margin: 0;
}
.carousel ul li a img{
width: 500px;
height: 250px;
}
.carousel ul li{
display: none;
}
.carousel ul li.active{
display: block;
}
.carousel ol{
width: 60px;
height: 20px;
background-color:rgba(255,255,255,.8);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
border-radius: 10px;
}
.carousel ol li{
width: 10px;
height: 10px;
border-radius: 50%;
margin: 5px;
float: left;
background-color: #0f0;
}
.carousel>a{
text-decoration: none;
color: #fff;
background-color: rgba(255,255,0,.8);
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
font-weight: bold;
font-size: 30px;
}
.carousel>a.leftBtn{
left: -15px;
}
.carousel>a.rightBtn{
right: -15px;
}
.carousel ol li.active{
background-color: #f00;
}
</style>
<body>
<!-- 1.布局 -->
<div class="carousel">
<ul>
<li class="active">
<a href="">
<img src="./images/1.webp" alt="">
</a>
</li>
<li>
<a href="">
<img src="./images/2.webp" alt="">
</a>
</li>
<li>
<a href="">
<img src="./images/3.webp" alt="">
</a>
</li>
</ul>
<ol>
<li class="active"></li>
<li></li>
<li></li>
</ol>
<a class="leftBtn" href=""><</a>
<a class="rightBtn" href="">></a>
</div>
</body>
<script>
// 使用面向对象的语法实现轮播图 - 一个对象
// 1.空构造函数
function Carousel() {
// 3.获取标签作为对象的属性
this.container = document.querySelector('.carousel');
this.leftBtn = document.querySelector('.carousel>a.leftBtn');
this.rightBtn = document.querySelector('.carousel>a.rightBtn');
this.ulis = document.querySelectorAll('.carousel ul li');
this.olis = document.querySelectorAll('.carousel ol li');
// 以前我们要定义在全局变量是为了让多个局部共用同一个数据。现在换成面向对象写法后，就需要将这种数据放在对象的属性上，保证在多个方法中可以共用一个数据
this.index = 0
this.timer = null
}
// 4.单独做一个方法去绑定事件
Carousel.prototype.init = function() {
var that = this
this.rightBtn.onclick = function() {
that.index++
that.move()
return false
}
// 左箭头点击
this.leftBtn.onclick = function() {
that.index--
that.move()
return false
}
// 小圆点点击
for(let j=0; j<this.olis.length; j++) {
this.olis[j].onclick = function() {
that.index = j
that.move()
}
}
// 移出事件
this.container.onmouseout = () => {
this.auto()
}
// 移入
this.container.onmouseover = () => {
clearInterval(this.timer)
}
this.auto()
}
Carousel.prototype.move = function() {
if(that.index === that.ulis.length) {
that.index = 0
}
if(that.index < 0) {
that.index = that.ulis.length - 1
}
for(var i=0; i<that.ulis.length; i++) {
that.ulis[i].className = that.olis[i].className = ''
}
// 给当前下标对应的li添加active
that.ulis[that.index].className = that.olis[that.index].className = 'active'
}
Carousel.prototype.auto = function() {
// 自动轮播 - 用index
this.timer = setInterval(() => {
this.rightBtn.onclick()
}, 1000)
}
// 2.new他
var c = new Carousel()
console.log(c);
c.init()
</script>
