用vue实现轮播图

效果图：

实现代码：

<template>
    <div class="">
        <div class="banner">
            <div class="item">
                <img :src="dataList[currentIndex]">
            </div>
            <div class="turning" v-if="this.dataList.length > 1">
                <li @click="gotoPage(prevIndex)" class="left"><i class="iconfont icon-fanye-copy"></i></li>
                <li @click="gotoPage(nextIndex)" class="right"><i class="iconfont icon-fanye"></i></li>
            </div>
            <div class="page" v-if="this.dataList.length > 1">
                <ul>
                    <li v-for="(item,index) in dataList" @click="gotoPage(index)" :class="{'current':currentIndex == index}" class="dot"></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            dataList: ["", "", ""],//banner图片地址
            currentIndex: 0,   //默认显示图片
            timer: null    //定时器
        };
    },

    created() { },
    mounted() {
        this.runInv()
    },

    components: {},

    computed: {
        //上一张
        prevIndex() {
            if (this.currentIndex == 0) {
                return this.dataList.length - 1;
            } else {
                return this.currentIndex - 1;
            }
        },
        //下一张
        nextIndex() {
            if (this.currentIndex == this.dataList.length - 1) {
                return 0;
            } else {
                return this.currentIndex + 1;
            }
        }
    },

    methods: {

        gotoPage(index) {
            this.currentIndex = index;
        },
        runInv() {
            this.timer = setInterval(() => {
                this.gotoPage(this.nextIndex)
            }, 2000)
        }
    }
}

</script>
<style lang='scss' scoped>
.banner {
    margin: 0 auto;
    position: relative;
    img {
        width: 100%;
        display: block;
        height: 350px;
    }
    .page {
        position: absolute;
        right: 20px;
        bottom: 10px;
        width: 100%;
        ul {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .dot {
                background: #000000;
                opacity: 0.3;
                width: 10px;
                height: 10px;
                margin: 0 5px;
            }
        }
    }
    .turning {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0 20px;
    }
    .left,
    .right {
        i {
            cursor: pointer;
            font-size: 40px;
            color: #000;
            opacity: 0.3;
        }
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    .current {
        background: #6c89b4 !important;
        opacity: 1 !important;
    }
    ul li {
        list-style: none;
        float: left;
        width: 30px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
    }
}
</style>