效果展示

輪播

html

<div class="login_img">
    <transition-group tag='ul' name='img'>
    <li v-for='(image,index) in imgs' :key='index' v-show='index===mark'>
        <div class="divImg" :style="{backgroundImage: 'url('+image+')'}"></div>
    </li>
    </transition-group>
</div>

css

*{
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.login_img ul li {
    position: absolute;
}
.login_img .divImg {
    background-position: 0px;
    background-size: cover;
    background-repeat: no-repeat;
    width: 700px;
    height: 400px;
}
.img-enter-active,.img-leave-active {
    transition: all 4s;
}
.img-enter,.img-leave-to {
    opacity: 0;
}
.img-enter-to,.img-leave {
    opacity: 1;
}

js

var app = new Vue({
    el: "#app",
    data: {
        mark: 0,
        imgs: [
            '../assets/img/bg.jpg',
            '../assets/img/bg2.jpg',
            '../assets/img/bg3.jpg'
        ]
    },
    created() {
        this.play()
    },
    methods: {
        autoPlay() {
            if(this.mark<this.imgs.length-1){
                this.mark++;
            }else{
                this.mark = 0;
            }
        },
        play() {
            setInterval(this.autoPlay, 3000)
        }
    }
});

vue中用到了transition標(biāo)簽：關(guān)于transition