效果图:
实现代码:
<template>
<div class="">
<div class="banner">
<div class="item">
<img :src="dataList[currentIndex]">
</div>
<div class="turning" v-if="this.dataList.length > 1">
<li @click="gotoPage(prevIndex)" class="left"><i class="iconfont icon-fanye-copy"></i></li>
<li @click="gotoPage(nextIndex)" class="right"><i class="iconfont icon-fanye"></i></li>
</div>
<div class="page" v-if="this.dataList.length > 1">
<ul>
<li v-for="(item,index) in dataList" @click="gotoPage(index)" :class="{'current':currentIndex == index}" class="dot"></li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
dataList: ["", "", ""],//banner图片地址
currentIndex: 0, //默认显示图片
timer: null //定时器
};
},
created() { },
mounted() {
this.runInv()
},
components: {},
computed: {
//上一张
prevIndex() {
if (this.currentIndex == 0) {
return this.dataList.length - 1;
} else {
return this.currentIndex - 1;
}
},
//下一张
nextIndex() {
if (this.currentIndex == this.dataList.length - 1) {
return 0;
} else {
return this.currentIndex + 1;
}
}
},
methods: {
gotoPage(index) {
this.currentIndex = index;
},
runInv() {
this.timer = setInterval(() => {
this.gotoPage(this.nextIndex)
}, 2000)
}
}
}
</script>
<style lang='scss' scoped>
.banner {
margin: 0 auto;
position: relative;
img {
width: 100%;
display: block;
height: 350px;
}
.page {
position: absolute;
right: 20px;
bottom: 10px;
width: 100%;
ul {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
.dot {
background: #000000;
opacity: 0.3;
width: 10px;
height: 10px;
margin: 0 5px;
}
}
}
.turning {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0 20px;
}
.left,
.right {
i {
cursor: pointer;
font-size: 40px;
color: #000;
opacity: 0.3;
}
}
.left {
float: left;
}
.right {
float: right;
}
.current {
background: #6c89b4 !important;
opacity: 1 !important;
}
ul li {
list-style: none;
float: left;
width: 30px;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
}
}
</style>