Vue练习三十:04_03_自动改变方向播放_幻灯片效果
Demo 在线地址:
https://sx00xs.github.io/test/30/index.html
---------------------------------------------------------------
ide: vscode
文件格式:.vue
解析:(待补)
<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>