用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'}
		}				
	}
})