直播app系统源码，上下叠层样式的轮播图

<template><br><div class="article-main" @mouseover='mouseOver()' @mouseleave="mouseLeave()"><br><img src="../../assets/a3.jpeg" :class="v1" /><br><img src="../../assets/a2.jpeg" :class="v2" /><br><img src="../../assets/a1.jpeg" :class="v3" /><br><div class="dot-view"><br><div :class="dot1"><br></div><br><div :class="dot2"><br></div><br><div :class="dot3"><br></div><br></div><br><div class="arrow-view" v-show="isActive"><br><img src="../../assets/btn-l-d.png" class="arrow-left" @click="toLeft()" /><br><img src="../../assets/btn-r-d.png" class="arrow-right" @click="toRight()" /><br></div><br></div><br></template><br><script><br>export default {<br>name: 'home',<br>data() {<br>return {<br>timer: '',<br>isActive: false,<br>value: 1,<br>v1: 'banner wz1',<br>v2: 'banner wz2',<br>v3: 'banner wz3',<br>dot1: 'dot-1 dot-color-actived',<br>dot2: 'dot-2 dot-color-normal',<br>dot3: 'dot-3 dot-color-normal'<br>}<br>},<br>methods: {<br>toLeft() {<br>this.value--<br>if (this.value == 0) {<br>this.value = 3<br>}<br>this.changeClasss()<br>},<br>toRight() {<br>this.value++<br>if (this.value > 3) {<br>this.value = 1<br>}<br>this.changeClasss()<br>},<br>mouseOver() {<br>this.isActive = true<br>clearInterval(this.timer);<br>},<br>// 移出<br>mouseLeave() {<br>this.isActive = false<br>this.timer = setInterval(this.get, 3000);<br>},<br>changeClasss() {<br>if (this.value == 1) {<br>this.v1 = 'banner wz1'<br>this.v2 = 'banner wz2'<br>this.v3 = 'banner wz3'<br>this.dot1 = 'dot-1 dot-color-actived'<br>this.dot2 = 'dot-2 dot-color-normal'<br>this.dot3 = 'dot-3 dot-color-normal'<br>}<br>if (this.value == 2) {<br>this.v1 = 'banner wz2'<br>this.v2 = 'banner wz3'<br>this.v3 = 'banner wz1'<br>this.dot1 = 'dot-1 dot-color-normal'<br>this.dot2 = 'dot-2 dot-color-actived'<br>this.dot3 = 'dot-3 dot-color-normal'<br>}<br>if (this.value == 3) {<br>this.v1 = 'banner wz3'<br>this.v2 = 'banner wz2'<br>this.v3 = 'banner wz1'<br>this.dot1 = 'dot-1 dot-color-normal'<br>this.dot2 = 'dot-2 dot-color-normal'<br>this.dot3 = 'dot-3 dot-color-actived'<br>}<br>},<br>get() {<br>this.value++;<br>if (this.value > 3) {<br>this.value = 1<br>}<br>this.changeClasss()<br>}<br>},<br>mounted() {<br>this.timer = setInterval(this.get, 3000);<br>},<br>beforeDestroy() {<br>clearInterval(this.timer);<br>},<br>}<br></script><br><style scoped><br>.arrow-left {<br>position: absolute;<br>left: 20px;<br>top: 250px;<br>cursor: pointer;<br>}<br>.arrow-right {<br>position: absolute;<br>left: 280px;<br>top: 250px;<br>cursor: pointer;<br>}<br>.article-main {<br>width: 320px;<br>height: 300px;<br><br>position: relative;<br>}<br>.banner {<br>border-radius: 4px;<br>position: absolute;<br>transition: all 1s;<br>}<br>.wz1 {<br>width: 280px;<br>height: 200px;<br>left: 20px;<br>z-index: 777;<br>top: 20px;<br>}<br>.wz2 {<br>width: 290px;<br>height: 200px;<br>left: 15px;<br>top: 30px;<br>z-index: 888;<br>}<br>.wz3 {<br>width: 300px;<br>height: 200px;<br>left: 10px;<br>top: 40px;<br>z-index: 999;<br>}<br>.dot-view {<br>position: absolute;<br>left: 120px;<br>top: 255px;<br>display: flex;<br>flex-direction: row;<br>}<br>.dot-color-actived {<br>background-color: #ff0000;<br>}<br>.dot-color-normal {<br>background-color: #333;<br>}<br>.dot-1 {<br>width: 10px;<br>height: 10px;<br>border-radius: 50%;<br>}<br>.dot-2 {<br>width: 10px;<br>height: 10px;<br>border-radius: 50%;<br>margin-left: 20px;<br>}<br>.dot-3 {<br>margin-left: 20px;<br>width: 10px;<br>height: 10px;<br>border-radius: 50%;<br>}<br></style>