[JavaScript知识库]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>