vue 写一个轮播图

问题描述:项目里需要一个轮播图，
解决方法:
第一种方法：elementui的跑马灯

<template>
    <div class="lunbo-box">
    <el-carousel indicator-position="outside">
    <el-carousel-item v-for="item in abc_img" :key="item">
      <img :src="item.img"/>
    </el-carousel-item>
  </el-carousel>
  </div>
</template>
<script>
export default {
     data() {
        return {
            abc_img: [
                { img: require("@/assets/images/homebanner.jpg") },
                { img: require("@/assets/images/case_banner.jpg") },
                { img: require("@/assets/images/server_banner.jpg") },
            ],
        };
    },
}
</script>

第二种方法
封装一个组件（pc端和移动端兼容），父组件直接引用即可 引用用vue写一个轮播图效果

<template>
    <div class="banner">
        <div class="item">
            <img :src="dataList[currentIndex]" />
        </div>
        <div class="page" v-if="this.dataList.length > 1">
            <ul>
                <!-- <li @click="gotoPage(prevIndex)">&lt;</li> -->
                <li
                    v-for="(item,index) in dataList"
                    :Key="index"
                    @click="gotoPage(index)"
                    :class="{'current':currentIndex == index}"
                    style="list-style:circle"
                ></li>
                <!-- <li @click="gotoPage(nextIndex)">&gt;</li> -->
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dataList: [
                require("../assets/images/homebanner.jpg"),
                require("../assets/images/xincloudbanner.jpg"),
                require("../assets/images/banner.jpg"),
                require("../assets/images/case_banner.jpg"),
                require("../assets/images/server_banner.jpg"),
                require("../assets/images/about_banner.jpg")
            ],
            currentIndex: 0, //默认显示图片
            timer: null //定时器
        };
    },
    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: {
        //定时器
        runInv() {
            this.timer = setInterval(() => {
                this.gotoPage(this.nextIndex);
            }, 2000);
        },
        gotoPage(index) {
            this.currentIndex = index;
        }
    },
    mounted() {
        this.runInv();
    }
};
</script>
<style  lang="stylus" scoped>
/* （phone） */
@media screen and (max-width: 767px)
    ul li
        float: left
        width: 30px
        height: 30px
        line-height: 30px
        text-align: center
        cursor: pointer
        color: rgba(255, 255, 255, 0.8)
        font-size: 14px
        // &:nth-child(2)
        //     margin-left 40px
    .banner
        // max-width: 1200px
        margin: 0 auto
        position: relative
        margin-top: 60px
    .banner img
        width: 100%
        display: block
    .banner .page
        background: rgba(0, 0, 0, 0.5)
        position: absolute
        right: 0
        bottom: 0
        width: 100%
    .banner .page ul
        float: right
    .current
        color: #ff6700
/* （电脑） */
@media screen and (min-width: 768px)
    ul li
        float: left
        width: 30px
        height: 40px
        line-height: 40px
        text-align: center
        cursor: pointer
        color: rgba(255, 255, 255, 0.8)
        font-size: 14px
        // &:nth-child(2)
        //     margin-left 40px
    .banner
        // max-width: 1200px
        margin: 0 auto
        position: relative
        margin-top: 60px
    .banner img
        width: 100%
        display: block
    .banner .page
        background: rgba(0, 0, 0, 0.5)
        position: absolute
        right: 0
        bottom: 0
        width: 100%
    .banner .page ul
        float: right
    .current
        color: #ff6700
</style>

注意：在vue中，图片的引入需要加require
第三种方法 Swiper，引用Vue中使用Swiper插件实现轮播图自动播放，引用Swiper

<template>
    <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>
            <img class="banner-img" src="../assets/images/homebanner.jpg" />
        </swiper-slide>
        <swiper-slide>
            <img class="banner-img" src="../assets/images/homebanner1.jpg" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
export default {
    name: "carrousel",
    data() {
        return {
            swiperOptions: {
                //自动播放
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true
                },
                //循环
                loop: true
            }
        };
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.$swiper;
        }
    },
    mounted() {
        // console.log("Current Swiper instance object", this.swiper);
        this.swiper.slideTo(0, 0, false);
    }
};
</script>
<style lang="stylus" scoped>
.banner-img
    width 100%
    height auto
</style>