单文件组件实现轮播图

<template>
	<!-- 轮播图组件 -->
	<div class="banner">
		<div class="scoll">
			<img :src="imgs[index]" />
			<button type="button" class="btn prev" @click="prev">&lt;</button>
			<button type="button" class="btn next" @click="next">&gt;</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Banner',
		data() {
			return {
				index: 0,
				imgs: [
					'/img/20.png',
					'/img/21.jpg',
					'/img/22.jpg',
					'/img/23.jpg',
					'/img/24.jpg',
				]
			}
		},

		methods: {
			next() {
				if (this.index < this.imgs.length - 1) {
					this.index++;
				} else {
					this.index = 0;
				}
			},
			prev() {
				if (this.index > 0) {
					this.index--;
				} else {
					this.index = this.imgs.length - 1;
				}
			}

		},
		mounted: function() {
			setInterval(this.next, 3000);
		},

	}
</script>

<style scoped="scoped">
	* {
		padding: 0;
		margin: 0;
	}

	.scoll {
		width: 800px;
		height: 400px;
		position: relative;
	}

	img {
		width: 800px;
		height: 400px;
	}

	.btn {
		position: absolute;
		top: 180px;
		font-size: 22px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-color: rgb(200, 180, 200, 0.1);
		border: 1px solid #000000;
	}

	.prev {
		left: 0;
	}

	.next {
		right: 0;
	}
</style>