用vue写简单的轮播图

用vue写简单的轮播图

直接上代码
css

	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	.banner{
		width: 500px;
		margin: 0 auto;
		position: relative;
		border: 1px solid black;
		overflow: hidden;
	}
	.con{
		width: 2500px;
		height: 200px;
	}
	.con li{
		width: 500px;
		height: 200px;
		background: orange;
		float: left;
		font-size: 40px;
		color: white;
		text-align: center;
		line-height: 200px;
		
	}
	.btn{
		position: absolute;			
		bottom: 10px;
		left: 140px;		
	}
	.btn li{
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: yellowgreen;
		float: left;
		margin: 10px;
		text-align: center;
		line-height: 30px;
		color: white;
	}
	.rb,.lb{
		position: absolute;
		font-size: 30px;
		color: white;
		top: 50%;
		margin-top: -20px;
	}
	.rb{
		right: 0;
	}

html

<div class="banner">
	<ul class="con" :style="classobj">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
	<ul class="btn">
		<li v-for="(item,index) in btns" @click="now(index)">{{item}}</li>
	</ul>
	<div class="rb" @click="rb">></div>
	<div class="lb" @click="lb"><</div>
</div>				

javascript

var vm=new Vue({
	el:".banner",
	data:{
		btns:[1,2,3,4,5],
		num:0,
	},
	methods:{
		now(index){
			this.num=index;
			console.log(this.num)
		},
		rb(){
			if(this.num==4){
				this.num=0;
			}else{
				this.num++;
			}						
		},
		lb(){
			if(this.num==0){
				this.num=4;
			}else{
				this.num--;
			}												
		}					
	},
	computed:{
		classobj:function(){						
			return {marginLeft:this.num*-500+'px'}
		}				
	}
})