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>``