Vue练习二十九:04_02_自动播放_幻灯片效果

2019-07-29

Vue练习二十九:04_02_自动播放_幻灯片效果

Demo 在线地址:
https://sx00xs.github.io/test/29/index.html
---------------------------------------------------------------
ide: vscode
文件格式:.vue

ps:淡入淡出效果未实现,需修改
解析:

需求:

  1. 5张图片,每隔2秒自动切换为下一张

 

  1. 鼠标移入,图片静止

鼠标移出,图片恢复定时切换

 

  1. 鼠标移到按钮,图片切换为按钮对应图片

 

  1. 图片切换时显示效果为淡入淡出

 

 

写一个辅助函数,接受一个参数(图片Index),将所有图片的current类去除掉, index对应图片添加current类

 

  1. 5张图片,每隔2秒自动切换为下一张

 

答:

默认显示第一张,2秒后切换为下一张

给每张图片设置一个index索引

使用setinterval,每2秒后将所有图片的item.isActive设置为false,递增 index,设置对应图片的isActive为真

 

 

  1. 鼠标移入,图片静止

鼠标移出,图片恢复定时切换

答:

鼠标移入时,销毁setinterval句柄

鼠标移出时,恢复interval

 

 

  1. 鼠标移到按钮,图片切换为按钮对应图片

答:

移到按钮,将按钮对应图片index传给辅助函数

 

 

 

  1. 图片切换时显示效果为淡入淡出

答:

图片包裹在transition组件中,设置class,自动应用

 

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

 

Vue练习二十九:04_02_自动播放_幻灯片效果

Vue练习二十九:04_02_自动播放_幻灯片效果

原文地址:https://www.cnblogs.com/sx00xs/p/11266148.html