废话不多直接上图和代码
上代码
代码有未完善
宽高类名 content
下面的几个点 .dot li
标红的.getDot
```<template>
<div class="content" @mouseenter="enter(1)" @mouseleave="enter(0)">
<ul class="slide">
<li v-for="(item, ind) in img">
<img class="slide-img" :src="item" alt="" />
</li>
</ul>
<ul class="dot">
<li v-for="(item, index) in img" :class="{ 'getDot': index == ind }" @click="goDot(index)"></li>
</ul>
<!-- 左右按钮 -->
<div class="slide-left" @click="toLeft">{{ "<" }}</div>
<div class="slide-right" @click="toRight">></div>
</div>
</template>
<script>
export default {
data() {
return {
ind: 0,
timer: null,
img: [
"https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1678813200&t=e91c3d659db905d4883311ca1e3c1246",
"https://img1.baidu.com/it/u=413643897,2296924942&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1679072400&t=2589b291db43523916b0e18e281e4862",
"https://img0.baidu.com/it/u=1273517628,1100314156&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1679072400&t=81245f44223e33f31f6bf8f6a20692ff",
],
};
},
methods: {
start() {
const than = this;
this.timer = setInterval(() => {
than.ind = (than.ind + 1) % than.img.length;
}, 2500);
},
enter(flag) {
let left = document.querySelector(".slide-left");
let right = document.querySelector(".slide-right");
if (flag) {
clearInterval(this.timer);
left.style.opacity = "1";
right.style.opacity = "1";
} else {
this.start();
left.style.opacity = "0";
right.style.opacity = "0";
}
},
toRight() {
this.ind = (this.ind + 1) % this.img.length;
},
toLeft(e) {
if (this.ind - 1 >= 0) {
this.ind = this.ind - 1;
} else {
this.ind = this.img.length - 1;
}
},
goDot(ind) {
this.ind = ind;
},
transitionLeft(li, nVal, oVal) {
li[oVal].classList.add('left')
if (nVal == li.length - 1) {
li[0].classList.add('right')
li[0].classList.remove('left')
} else {
li[nVal + 1].classList.add('right')
li[nVal + 1].classList.remove('left')
}
},
transitionRight(li, nVal, oVal) {
li[oVal].classList.add('right')
console.log(nVal - 1);
if (nVal == 0) {
li[li.length - 1].classList.remove('right')
li[li.length - 1].classList.add('left')
} else {
li[nVal - 1].classList.remove('right')
li[nVal - 1].classList.add('left')
}
}
},
watch: {
ind(nVal, oVal) {
let li = document.querySelectorAll(".slide>li");
console.log(nVal, typeof (nVal));
li[nVal].classList.remove('right')
li[nVal].classList.remove('left')
li[oVal].style.opacity = "0";
li[nVal].style.opacity = "1";
if ((nVal > oVal) || (oVal == li.length - 1 && nVal == 0)) {
if (oVal == 0 && nVal == li.length - 1) {
this.transitionRight(li, nVal, oVal)
} else {
this.transitionLeft(li, nVal, oVal)
}
} else {
this.transitionRight(li, nVal, oVal)
}
},
},
mounted() {
let li= document.querySelectorAll(".slide>li");
li[0].style.opacity = "1";
li[1].classList.add('right')
this.start();
},
};
</script>
<style lang="scss" scoped>
.content {
margin: 50px auto;
position: relative;
width: 600px;
height: 300px;
overflow: hidden;
}
.slide {
display: flex;
}
.slide li {
width: 100%;
height: 100%;
list-style: none;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all .3s ease-in-out;
z-index: 1;
}
.slide img {
width: 100%;
height: 100%;
}
.slide-left {
position: absolute;
top: calc(50% - 25px);
left: 0;
z-index: 2;
width: 30px;
height: 50px;
background-color: rgba(0, 0, 0, 0.404);
color: white;
text-align: center;
line-height: 50px;
cursor: pointer;
user-select: none;
opacity: 0;
transition: opacity .5s ease-in-out;
}
.left {
transform: translate(-100%);
}
.right {
transform: translate(100%);
}
.slide-right {
position: absolute;
top: calc(50% - 25px);
right: 0;
z-index: 2;
width: 30px;
height: 50px;
background-color: rgba(0, 0, 0, 0.404);
color: white;
text-align: center;
line-height: 50px;
cursor: pointer;
user-select: none;
opacity: 0;
transition: opacity .5s ease-in-out;
}
.dot {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 2;
display: flex;
transform: translate(-50%);
}
.dot li {
width: 6px;
height: 6px;
border-radius: 50%;
list-style: none;
margin: 0 15px;
border: 1px solid rgb(87, 86, 86);
background-color: white;
cursor: pointer;
opacity: 0.7;
}
.dot .getDot {
background-color: red;
}
</style>```
