Demo online address:
https://sx00xs.github.io/test/30/index.html
----------------------------- ----------------------------------
IDE: VSCode
file formats: .vue
resolve to be completed :()
<template>
<div class="box" @mouseover="handleBoxOver" @mouseout="handleBoxOut">
<transition-group tag="ul" name="fade"
>
<li v-for="pic in pics" :key="pic.src" :class="{current:pic.isActive}" data-index="pic.count">
<img :src="pic.src" v-if="pic.isActive" width="490" height="170">
</li>
</transition-group>
<ul class="count">
<li v-for="item in pics" :key="item.count" :class="{current:item.isActive}"
@mouseover="handleCountOver(item.count)"
>
{{item.count+1}}
</li>
</ul>
</div>
</template>
<script>
import { setInterval, clearInterval } from 'timers';
export default {
name:'Navs',
data(){
return{
index:0,
timer:null,
play:null,
bOrder:true,
pics:[
{
src:require('../assets/lesson4/01.jpg'),
isActive:true,
count:0
},
{
src:require('../assets/lesson4/02.jpg'),
isActive:false,
count:1
},
{
src:require('../assets/lesson4/03.jpg'),
isActive:false,
count:2
},
{
src:require('../assets/lesson4/04.jpg'),
isActive:false,
count:3
},
{
src:require('../assets/lesson4/05.jpg'),
isActive:false,
count:4
},
]
}
},
methods:{
handleBoxOver(){
clearInterval(this.play);
},
handleBoxOut(){
this.auotPlay()
},
auotPlay(){
var _this=this;
this.play=setInterval(function(){
_this.bOrder ? _this.index++ : _this.index--;
_this.index >= _this.pics.length && (_this.index= _this.pics.length-2, _this.bOrder=false);
_this.index <=0 && (_this.index=0, _this.bOrder=true);
_this.show(_this.index)
},2000)
},
show(count){
this.index=count;
for(var i=0;i<this.pics.length;i++) this.pics[i].isActive=false;
this.pics[this.index].isActive=true;
},
handleCountOver(count){
this.show(count)
},
enter(el,done){
},
leave(el,done){
}
},
created(){
this.auotPlay();
}
}
</script>