The source code of live broadcast app system, and the rotation diagram of upper and lower layers

live broadcast app System source code , Top and bottom layer style rotation chart

<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);
			},
			//  Removed from the 
			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>

That's all live broadcast app System source code , Top and bottom layer style rotation chart , More content welcome to follow the article