直接看代码
<template>
<div class="pic">
<ul class="tu">
<transition-group name="img">
<li v-for="(item,index) in pic" :key="index" v-show="index===mark" @mouseenter="stop" @mouseleave="go">
<img :src="item" :key="index">
</li>
</transition-group>
</ul>
<ul class="bannerBtn">
<li v-for="num in 3">
<a href="javascript:;" :style="{background:num-1===mark?'#ff7800':''}" @click='change(num-1)' class='aBtn'></a>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
pic:["../../../static/image/1.png","../../../static/image/2.png",
"../../../static/image/3.png"],
mark:0,
timer:''
}
},
created() {
this.play()
},
methods:{
autoplay(){
if(this.mark<this.pic.length-1){
this.mark++;
}else{
this.mark = 0;
}
},
play(){
this.timer=setInterval(this.autoplay,5000)
},
change(num){
this.mark=num;
},
stop(){
clearInterval(this.timer);
this.timer=null;
},
go(){
this.timer=setInterval(this.autoplay,5000)
}
}
}
</script>
<style scoped>
.pic{
position: relative;
margin-left:100px;
margin-top:40px;
width:550px;
height:305px;
}
img{width:100%;
height:100%;
}
.tu li{position:absolute;
top:0;
left:0;
list-style: none;
}
.img-enter-active,
.img-leave-active {
transition: all 4s;
}
.img-enter,
.img-leave-to {
opacity: 0;
}
.img-enter-to,
.img-leave {
opacity: 1;
}
.aBtn{transition:all 4s ease;}
.bannerBtn li{
float:left;
width: 20px;
height: 20px;
border-radius: 50%;
list-style:none;
}
.bannerBtn li a{
margin-left:2.5px;
margin-top:1.5px;
display: block;
width: 10px;
height: 10px;
border:0.5px solid white;
border-radius: 50%;
}
.bannerBtn{
width: 70px;
position:absolute;
left:35%;
top:250px;
bottom:22px;
height:20px;
text-align: center;
}
</style>
