vue实现淡入淡出

最新推荐文章于 2024-03-19 09:30:24 发布

渣渣前端

最新推荐文章于 2024-03-19 09:30:24 发布

阅读量8.5k

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/dtbk123/article/details/98224622

版权

前端专栏收录该内容

74 篇文章 0 订阅

订阅专栏

直接看代码

<template>
    <div class="pic">
        <ul class="tu">
            <transition-group name="img">
            <li v-for="(item,index) in pic" :key="index" v-show="index===mark" @mouseenter="stop" @mouseleave="go">
                <img :src="item" :key="index">
            </li>
            </transition-group>
        </ul>
        <ul class="bannerBtn">
            <li v-for="num in 3">
                <a href="javascript:;" :style="{background:num-1===mark?'#ff7800':''}" @click='change(num-1)' class='aBtn'></a>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {

        data(){
            return{
                pic:["../../../static/image/1.png","../../../static/image/2.png",
                    "../../../static/image/3.png"],
                mark:0,
                timer:''
            }
        },
        created() {
            this.play()
        },
        methods:{
            autoplay(){
                if(this.mark<this.pic.length-1){
                    this.mark++;
                }else{
                    this.mark = 0;
                }

            },
            play(){
                this.timer=setInterval(this.autoplay,5000)
            },
            change(num){
            this.mark=num;
            },
            stop(){
                clearInterval(this.timer);
                this.timer=null;
            },
            go(){
                this.timer=setInterval(this.autoplay,5000)
            }
        }
    }
</script>

<style scoped>
.pic{
    position: relative;
    margin-left:100px;
    margin-top:40px;
    width:550px;
    height:305px;
}
img{width:100%;
    height:100%;
}
.tu li{position:absolute;
        top:0;
        left:0;
        list-style: none;
    }
.img-enter-active,
.img-leave-active {
    transition: all 4s;
}

.img-enter,
.img-leave-to {
    opacity: 0;
}

.img-enter-to,
.img-leave {
    opacity: 1;
}
.aBtn{transition:all 4s ease;}
.bannerBtn li{
    float:left;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    list-style:none;
}
.bannerBtn li a{
    margin-left:2.5px;
    margin-top:1.5px;
    display: block;
    width: 10px;
    height: 10px;
    border:0.5px solid white;
    border-radius: 50%;
}
.bannerBtn{
    width: 70px;
    position:absolute;
    left:35%;
    top:250px;
    bottom:22px;
    height:20px;
    text-align: center;
}
</style>