vue实现轮播图
/* Start 基本
样式*/
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
font-size: 14px;
background: #fff;
overflow-y: scroll;
overflow-x: hidden;
}
html,
body {
/* max-width: 720px; */
height: 100%;
margin: 0 auto;
}
/* End 基本样式 */
.banner{
width: 100%;
}
.item{
width: 100%;
display: flex;
flex-direction: row;
}
.item img{
width: 100%;
}
.page{
display: flex;
flex-direction: row;
width: 100%;
position: absolute;
bottom: 20px;
}
.page ul{
display: flex;
flex-direction: row;
margin: 0 auto;
}
.page li{
padding:0 5px;
}
.number:hover{
color: red;
font-weight: bold;
}
// 圆点的点击事件
gotoPage (index) {
// 将index赋值给图片的
下标currentIndex
this.currentIndex = index
},
// 点击事件的函数
// 上一张
prevIndex () {
// eslint-disable-next-line eqeqeq
if (this.currentIndex == 0) {
return this.dataList.length - 1
} else {
return this.currentIndex - 1
}
},
// 下一张
nextIndex () {
// eslint-disable-next-line eqeqeq
if (this.currentIndex == this.dataList.length - 1) {
return 0
} else {
return this.currentIndex + 1
}
},
//
定时器
runInv () {
this.timer = setInterval(() => {
this.gotoPage(this.nextIndex)
}, 1000)
}
}
data () {
return {
dataList: ['https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg', 'https://i1.mifile.cn/a4/xmad_15532384207972_iJXSx.jpg', 'https://i1.mifile.cn/a4/xmad_15517939170939_oiXCK.jpg'],
currentIndex: 0, // 默认显示图片
timer: null // 定时器
}
<div class="banner">
<div class="item">
<img :src="dataList[currentIndex]" alt="加载中。
。
。
">
</div>
<div class="page" v-if="this.dataList.length > 1">
<ul>
<li @click="gotoPage(prevIndex)"><</li>
<li v-for="(item,index) in dataList" @click="gotoPage(index)" :class="{'current':currentIndex == index}" v-bind:key="index" class="number">{{index+1}}</li>
<li @click="gotoPage(nextIndex)">></li>
</ul>
</div>
</div>
微信扫一扫
支付宝扫一扫
评论列表（0条）