Vue实现上下层叠轮播图
时间：2022-12-21 09:27:51 | 栏目：vue | 点击：次
上下层叠轮播图
1.效果
2.代码
<template> <div class="article-main" @mouseover='mouseOver()' @mouseleave="mouseLeave()"> <img src="../../assets/a3.jpeg" :class="v1" /> <img src="../../assets/a2.jpeg" :class="v2" /> <img src="../../assets/a1.jpeg" :class="v3" /> <div class="dot-view"> <div :class="dot1"> </div> <div :class="dot2"> </div> <div :class="dot3"> </div> </div> <div class="arrow-view" v-show="isActive"> <img src="../../assets/btn-l-d.png" class="arrow-left" @click="toLeft()" /> <img src="../../assets/btn-r-d.png" class="arrow-right" @click="toRight()" /> </div> </div> </template>
<script>
export default {
name: 'home',
data() {
return {
timer: '',
isActive: false,
value: 1,
v1: 'banner wz1',
v2: 'banner wz2',
v3: 'banner wz3',
dot1: 'dot-1 dot-color-actived',
dot2: 'dot-2 dot-color-normal',
dot3: 'dot-3 dot-color-normal'
}
},
methods: {
toLeft() {
this.value--
if (this.value == 0) {
this.value = 3
}
this.changeClasss()
},
toRight() {
this.value++
if (this.value > 3) {
this.value = 1
}
this.changeClasss()
},
mouseOver() {
this.isActive = true
clearInterval(this.timer);
},
// 移出
mouseLeave() {
this.isActive = false
this.timer = setInterval(this.get, 3000);
},
changeClasss() {
if (this.value == 1) {
this.v1 = 'banner wz1'
this.v2 = 'banner wz2'
this.v3 = 'banner wz3'
this.dot1 = 'dot-1 dot-color-actived'
this.dot2 = 'dot-2 dot-color-normal'
this.dot3 = 'dot-3 dot-color-normal'
}
if (this.value == 2) {
this.v1 = 'banner wz2'
this.v2 = 'banner wz3'
this.v3 = 'banner wz1'
this.dot1 = 'dot-1 dot-color-normal'
this.dot2 = 'dot-2 dot-color-actived'
this.dot3 = 'dot-3 dot-color-normal'
}
if (this.value == 3) {
this.v1 = 'banner wz3'
this.v2 = 'banner wz2'
this.v3 = 'banner wz1'
this.dot1 = 'dot-1 dot-color-normal'
this.dot2 = 'dot-2 dot-color-normal'
this.dot3 = 'dot-3 dot-color-actived'
}
},
get() {
this.value++;
if (this.value > 3) {
this.value = 1
}
this.changeClasss()
}
},
mounted() {
this.timer = setInterval(this.get, 3000);
},
beforeDestroy() {
clearInterval(this.timer);
},
}
</script>
<style scoped>
.arrow-left {
position: absolute;
left: 20px;
top: 250px;
cursor: pointer;
}
.arrow-right {
position: absolute;
left: 280px;
top: 250px;
cursor: pointer;
}
.article-main {
width: 320px;
height: 300px;
background-color: #aaffff;
position: relative;
}
.banner {
border-radius: 4px;
position: absolute;
transition: all 1s;
}
.wz1 {
width: 280px;
height: 200px;
left: 20px;
z-index: 777;
top: 20px;
}
.wz2 {
width: 290px;
height: 200px;
left: 15px;
top: 30px;
z-index: 888;
}
.wz3 {
width: 300px;
height: 200px;
left: 10px;
top: 40px;
z-index: 999;
}
.dot-view {
position: absolute;
left: 120px;
top: 255px;
display: flex;
flex-direction: row;
}
.dot-color-actived {
background-color: #ff0000;
}
.dot-color-normal {
background-color: #333;
}
.dot-1 {
width: 10px;
height: 10px;
border-radius: 50%;
}
.dot-2 {
width: 10px;
height: 10px;
border-radius: 50%;
margin-left: 20px;
}
.dot-3 {
margin-left: 20px;
width: 10px;
height: 10px;
border-radius: 50%;
}
</style>
原生轮播图（无缝轮播图）
效果图
<template> <div> <div class="swiper"> <ul ref="swiper" class="swipero"> <li v-for="(item, index) in items" :key="index"> <div v-text="item.name"></div> </li> </ul> </div> <div @click="preNext()">下一页</div> <div @click="preLast()">上一页</div> </div> </template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: "1" },
{ id: 1, name: "2" },
{ id: 1, name: "3" },
],
timer: null,
active: 0,
flag: true,
};
},
mounted() {
this.init();
},
methods: {
// 初始化克隆一个元素，用来解决视觉差的效果（瞬移）
init() {
let swiper = this.$refs.swiper;
let first = swiper.firstElementChild.cloneNode(true);
swiper.appendChild(first);
},
//下一页
next() {
let swiper = this.$refs.swiper;
// 判断是否是最后一个
// debugger;
if (this.$refs.swiper.children.length - 2 <= this.active) {
// debugger
setTimeout(() => {
let swiper = this.$refs.swiper;
this.active = 0;
swiper.style.transition = "none";
swiper.style.left = -200 * this.active + "px";
}, 500);
}
this.active++;
swiper.style.transition = "all .5s";
swiper.style.left = -200 * this.active + "px";
},
// 上一页
pre() {
let swiper = this.$refs.swiper;
// 判断是否是第一个,线瞬间移动到最后，然后再实现动画效果
if (this.active == 0) {
let len = this.$refs.swiper.children.length;
this.active = len - 1;
// debugger
swiper.style.transition = "none";
swiper.style.left = -200 * this.active + "px";
setTimeout(() => {
this.active = len - 2;
swiper.style.transition = "all .5s";
swiper.style.left = -200 * this.active + "px";
}, 300);
} else {
this.active--;
swiper.style.transition = "all .5s";
swiper.style.left = -200 * this.active + "px";
// this.swiper();
}
},
// 节流
throttle(callback,speed=3000) {
let self = this;
if (self.flag) {
clearTimeout(this.timer);
self.timer = setTimeout(() => {
callback();
self.flag = true;
}, speed);
}
this.flag = false;
},
// 下一页(节流)
preNext() {
this.throttle(this.next,1000);
},
// 上一页(节流)
preLast() {
this.throttle(this.pre,1000);
},
// 自动轮播
swiper() {
let self = this;
setInterval(() => {
self.pre();
}, 3000);
},
},
};
</script>
<style lang="less" scoped>
.swiper {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
ul {
position: absolute;
bottom: 0;
left: 0;
width: 100vw;
white-space: nowrap;
li {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: bottom;
position: relative;
// margin-right: 20px;
transition: all 0.5s;
> div {
width: 100%;
height: 100%;
}
&:nth-child(1) {
background-color: aquamarine;
}
&:nth-child(2) {
background-color: rgb(255, 204, 127);
}
&:nth-child(3) {
background-color: rgb(255, 127, 144);
}
&:nth-child(4) {
background-color: rgb(127, 255, 223);
}
}
.active {
width: 400px;
height: 400px;
}
}
}
</style>