vue 实现无限轮播_vue实现一个轮播效果

template lang="html">

上一项

下一项

data(){return{

cur:0,

banners: [{src: img1},{src: img2},{src: img3}],

timer:null}

},

created(){this.startAutoPlay();

},

beforeDestroy(){this.endAutoPlay();

},

methods:{

prev(){if(this.cur==0){this.cur=this.banners.length-1;

}else{this.cur--;

}

},

next(){if(this.cur==this.banners.length-1){this.cur=0;

}else{this.cur++;

}

},

startAutoPlay(){this.timer=setInterval(this.next, 2000);

},

endAutoPlay(){

clearInterval(this.timer);

}

}

}

/*banner*/.banner {height:420px;position:relative;}

.banner-container {width:1920px;height:420px;position:absolute;left:0;top:0;z-index:1;opacity:0;transition:.7s all ease}

.banner-container img {width:1920px;height:420px;}

.banner-container.cur {opacity:1;}

.banner .btn {

position:absolute;

z-index:2;

left:50%;top:200px;

text-indent:-99999px;

width:50px;height:50px;border-radius:50%;

background-color:#D0C4AF;

background-image:url(../assets/images/icon2.png);

background-repeat:no-repeat;

}

.banner .btn:hover {background-color:#B19E7A;}

.banner .btn.prev {background-position:0 -5384px;margin-left:-605px;}

.banner .btn.next {background-position:0 -5604px;margin-left:555px;}

.banner .number-list {position:absolute;left:0;width:100%;bottom:4px;text-align:center;z-index:2;}

.banner .number-list li {

display:inline-block;

width:8px;height:8px;

margin:08px 10px;

cursor:pointer;

background:#FFF;

border-radius:50%;

border:1px solid #cecece;

transition:.7s all ease

}

.banner .number-list .active {

background:#a7936e;

box-shadow:0 0 04px #dfcead;

}