目录
1.组件SwiperCom.vue代码
<template>
<div class="swiper" @mouseover="overHd" @mouseout="auto">
<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind==index">
<img :src="item" width="100%">
</div>
<div class="thumbs">
<span class="thumb" :class="{'active' :item==index+1}" v-for="item in 4" :key='item'
@click="index=item-1">{
{item}}</span>
</div>
</div>
</template>
<script>
export default {
props: {
gallery: {
type: Array,
default () {
return []
}
}
},
data() {
return {
//默认显示
index: 0,
stopID: null,
}
},
// 当组件挂载完毕 执行自动播放
created() {
this.auto();
},
methods: {
//鼠标一开 auto自动执行
auto() {
this.stopID = setInterval(() => {
this.index++;
this.check();
}, 2000)
},
overHd() {
clearInterval(this.stopID);
},
//检查边界
check() {
if (this.index == this.gallery.length) {
this.index = 0;
}
}
}
}
</script>
<style scoped="scoped">
.swiper {
position: relative;
}
.swiper .thumbs {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.thumb {
width: 10px;
height: 10px;
display: inline-block;
border-radius: 15px;
text-indent: 9999em;
margin: 0 5px;
background-color: #fff;
}
.thumb:hover {
cursor: pointer;
background-color: #f70;
}
.active {
background-color: #f70;
}
</style>
2.所要展示的页面代码
<template>
<SwiperCom style="width: 100%;" :gallery="gallery">
</SwiperCom>
</template>
<script>
//1.调用这个组件
import SwiperCom from '../components/SwiperCom.vue'
export default {
components:{
SwiperCom
},
data() {
return {
gallery:[
"https://yimingmarket.oss-cn-beijing.aliyuncs.com/images/2021/06/22/16243670368195266.png",
"https://yimingmarket.oss-cn-beijing.aliyuncs.com/images/2021/06/18/16240104796216034.png",
" https://yimingmarket.oss-cn-beijing.aliyuncs.com/images/2021/06/18/16240105261813250.png",
"https://yimingmarket.oss-cn-beijing.aliyuncs.com/images/2021/06/22/16243670368195266.png"
]
}
}
}
</script>