vue 写一个轮播图_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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

第二种方法
封装一个组件（pc端和移动端兼容），父组件直接引用即可 引用用vue写一个轮播图效果
注意：在vue中，图片的引入需要加require

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14