vue图片轮播

最新推荐文章于 2024-07-12 04:24:13 发布

bidepanm

最新推荐文章于 2024-07-12 04:24:13 发布

阅读量157

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/bidepanm/article/details/125235579

版权

<template>
    <div class="banner">
        <transition name="banner">
            <div class="img" v-for="(item, index) in datalist" v-if="num==index" :key="index">
  				{{item.name}}
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    name: 'rotation',
    data() {
        return {
            datalist: [
                {name:'11111'},
                {name:'1144'},
                {name:'122221'}
            ],
            num: 0, // 默认显示第几个
            animateTime: 5000 // 要和 css 的过渡一致
        }
    },
    mounted() {
        this.play() // 初始的时候加载
    },
    methods: {
        autoPlay() { // num自增，通过判断 num 和 index 相不相等，来显示对应 index 的banner
            let _this = this // 避免作用域的问题
            _this.num++
            if(_this .num === 3) {
                _this.num = 0
            }
        },
        play () { // 设置定时器，让banner显示隐藏
            let _this = this
            setInterval(this.autoPlay, _this.animateTime)
        }
    }
}
</script>

<style scoped>
.banner{width: 100%; height: 100%;position: relative; overflow: hidden;}
.banner .img{width: 100%; height: 100%;position: absolute;top: 0;}

.banner-enter-active, .banner-leave-active{transition: all 2s ease-in-out;}

.banner-enter{opacity: 0; left: 100%;}
.banner-enter-to{opacity: 1; left: 0;}

.banner-leave{opacity: 1; left: 0;}
.banner-leave-to{opacity: 0; left: -100%;}
</style>

```