vue实现banner轮播图

轮播图的实现原理
定义图片变量imgArray，设置需要轮播的图片，img标签动态绑定imgArray的每张图片链接，使用定时器改变每张图片显示的时间，实现轮播效果

<template lang="html">
	<div class="banner">
		<img v-for="(item,index) in imgArray"  :key="index"  :src="item" v-show="n==index"/>
		<div class="banner-circle">
			<ul>
				<li v-for="(item,index) in imgArray" :key="index" :class="index==n?'selected':''"
				 @click="clickImg(index)"></li>
			</ul>

		</div>
	</div>

</template>

<script>
export default {
	name:"banner",
	data(){
		return {
			n:0,//默认图片是第一张开始
			imgArray:[
				require('@/assets/1.png'),
				require('@/assets/2.png'),
				require('@/assets/3.png'),
			],//获取图片位置
		}
	},
	created(){
		this.play()
	},
	methods:{
		play(){
			this.timer = setInterval(this.autoPlay, 5000);//用定时器控制每张图的显示时间
		},
		autoPlay(){ 
			this.$data.n ++
			if(this.imgArray.length == this.n){
				this.n = 0 
			}
		},
		clickImg(index){
			this.n = index   //显示当前点击的图片

		}

	},
	beforeDestroy(){
		clearInterval(this.timer)   //清除定时器
	},


}
</script>

<style lang="css" scoped>
.banner{
	width: 100%;
}
img{
	width:100%;
	height: 100%;
}
.banner-circle{
	position: fixed;
	top: 20%;
	left:40%;
}
ul{
	display: flex;
}
li{
	height: 10px;
	width: 10px;
	margin-left: 10px;
	border-radius: 50%;
	background: red;
}
.selected{
	background: green;
}

</style>``