Vue练习三十：04_03_自动改变方向播放_幻灯片效果

<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>