我真是要报警了这一篇文章弄这么久！
真是上学不努力，长大搞IT的惨痛经历。
这是vue的banner系列写完了发现没有代码高亮我简直要疯了！
console.log("holle world").
css部分代码(头部引用加style标签)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
ul li{
list-style:none;
}
.box{
width: 400px;
height: 200px;
margin:200px auto;
position: relative;
overflow: hidden;
}
.banner{
overflow: hidden;
}
.banner li{
float: left;
}
.banner img{
width: 400px;
height: 200px;
}
.prev,.next{
width: 30px;
height: 30px;
background-color: #009688;
line-height: 30px;
text-align: center;
color: white;
position: absolute;
top:50%;
margin-top: -20px;
}
.prev{
left: 0;
}
.next{
right:0;
}
.dots{
width: 400px;
height: 15px;
text-align: center;
position:absolute;
bottom:5px;
left:0;
}
.dots li{
height: 15px;
width:15px;
border-radius: 50%;
background-color:#009688;
display: inline-block;
*zoom:1;
margin-left: 10px;
}
.dots .con{
background-color:pink;
}
</style>
body部分的代码
</head>
<body>
<div id="view">
<div class="box">
<ul class="banner" :style="{width:imgs.length*400+'px',marginLeft:-num*400+'px',transition:'all '+time+'s'}" @transitionend="end">
<li v-for="(x,index) in imgs"><img v-bind:src="x"></li>
</ul>
<div class="prev" @click="prev"><<</div>
<div class="next" @click="next">>></div>
<ul class="dots">
<li @click="dots(index)" v-for="(x,index) in len" :class="{con:index==a}" ></li>
</ul>
</div>
</div>
</body>
vue部分的挂载元素
<script>
var box=new Vue({
el:"#view",
data:{
num:0,
time:0.5,
imgs:["img/0.jpg","img/1.jpg","img/2.jpg","img/3.jpg",],
len:"",
flag:true,
//处理点和img长度不一样的时候的，用一个变量控制
a:""
},
mounted:function(){
this.imgs.push(this.imgs[0]);
this.len=this.imgs.length-1;
},
methods:{
next:function(){
if(this.flag){
this.num++;
this.time=0.5;
this.flag=false;
this.a=this.num;
}
if(this.num==this.imgs.length-1){
this.a=0
}
},
prev:function(){
if(this.flag){
this.num--
this.a=this.num;
if(this.num<0){
this.num=this.imgs.length-1;
this.a=this.num;
this.time=0;
//到第一张让它快速变化一下
setTimeout(function(){
this.time=0.5
this.num=this.imgs.length-2;
this.a=this.num;
}.bind(this),10)
}else{
this.time=0.5;
}
}
},
end:function(){
this.flag=true;
if(this.num==this.imgs.length-1){
this.num=0;
this.time=0;
this.a=this.num;
}
},
dots:function(index){
this.num=index;
this.a=this.num
}
}
})
</script>
</html>
网友评论