<template>
<div class="banner" @mouseenter="enter" @mouseleave="leave">
<div class="item">
<img :src="dataList[currentIndex]" />
</div>
<div class="page" v-if="this.dataList.length > 1">
<ul>
<li @click="gotoPage(prevIndex)"><</li>
<li
v-for="(item, index) in dataList" :key="index"
@click="gotoPage(index)"
:class="{ current: currentIndex === index }"
>
{{ index + 1 }}
</li>
<li @click="gotoPage(nextIndex)">></li>
</ul>
</div>
</div>
</template>
<script>
export default {
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 // 定时器
}
},
created () {
this.runInv()
},
methods: {
gotoPage (index) {
this.currentIndex = index
},
// 定时器
runInv () {
this.timer = setInterval(() => {
this.gotoPage(this.nextIndex)
}, 2000)
},
// 鼠标移入
enter () {
clearInterval(this.timer)
},
// 鼠标移出
leave () {
this.runInv()
}
},
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
}
}
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
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;
}
.banner {
max-width: 1200px;
margin: 0 auto;
position: relative;
margin-top: 60px;
}
.banner img {
width: 100%;
display: block;
}
.banner .page {
background: rgba(0, 0, 0, 0.5);
position: absolute;
right: 0;
bottom: 0;
width: 100%;
}
.banner .page ul {
float: right;
}
.current {
color: #ff6700;
}
</style>
用vue写一个轮播图
最新推荐文章于 2024-06-19 17:24:25 发布