Demo online address:
https://sx00xs.github.io/test/29/index.html
----------------------------- ----------------------------------
IDE: VSCode
file format: .vue
ps: fade effect is not achieved, the need to modify
Resolution:
demand:
- 5 images, every 2 seconds is automatically switched to the next
- Move the mouse, the still picture
Mouse out, the timing of switching picture recovery
- Mouse over the button, the picture switches to the corresponding picture button
- When the picture display is switched to fade
Write a helper function accepts a parameter (picture Index), all the pictures of the current class to get rid of, index corresponds pictures add current class
- 5 images, every 2 seconds is automatically switched to the next
answer:
After the first default display, switching to the next two seconds
Give each picture a set index index
Use setinterval, every 2 seconds after all pictures item.isActive set to false, increment index, set the corresponding picture of the true isActive
- Move the mouse, the still picture
Mouse out, the timing of switching picture recovery
answer:
When the mouse into the destruction setinterval handle
When the mouse is removed, the recovery interval
- Mouse over the button, the picture switches to the corresponding picture button
answer:
Over the button, the button corresponding to the picture index passed Helper
- When the picture display is switched to fade
answer:
Pictures wrapped in transition components, set class, automatic application
<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,
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.index++;
_this.index >= _this.pics.length && (_this.index=0);
_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>