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

Posted 2022-05-26 sx00xs

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>