* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
float: left;
width: 3rem;
height: 4rem;
line-height: 4rem;
text-align: center;
cursor: pointer;
color: rgba(255,255,255,.8);
font-size: 1.6rem;
}
.banner {
max-width: 50rem;
margin: 0 auto;
position: relative;
margin-top: 6rem;
}
.banner .item{
display: flex;
justify-content: center;
align-items: center;
}
.banner img {
height: 40rem;
width: auto;
display: block;
}
.banner .page {
background: rgba(0,0,0,.5);
position: absolute;
right: 0;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
}
.current {
color: #ff6700;
}
Vue.component('carousel', {
props:{
imglist: Array
},
data: () => {
return {
currentIndex: 0, //默认显示图片
timer: null //定时器
}
},
template: `
<div class="banner">
<div class="item">
<img :src="imglist[currentIndex]">
</div>
<div class="page" v-if="imglist.length > 1">
<ul>
<li @click="gotoPage(prevIndex)"><</li>
<li v-for="(item,index) in imglist" @click="gotoPage(index)" :class="{'current':currentIndex == index}">{{index+1}}</li>
<li @click="gotoPage(nextIndex)">></li>
</ul>
</div>
</div>
`,
computed: {
//上一张
prevIndex() {
if(this.currentIndex == 0) {
return this.imglist.length - 1;
}else{
return this.currentIndex - 1;
}
},
//下一张
nextIndex() {
if(this.currentIndex == this.imglist.length - 1) {
return 0;
}else {
return this.currentIndex + 1;
}
}
},
methods: {
gotoPage(index) {
this.currentIndex = index;
},
//定时器
runInv() {
this.timer = setInterval(() => {
this.gotoPage(this.nextIndex)
}, 1000)
}
},
created(){
},
mounted(){
// this.runInv();
},
updated(){
// console.log('updated');
}
})