vue实现轮播图

/* Start  基本样式*/

* {

  margin: 0;

  padding: 0;

}

ul {

  list-style-type: none;

}

body {

  font-size: 14px;

  background: #fff;

  overflow-y: scroll;

  overflow-x: hidden;

}

html,

body {

  /* max-width: 720px; */

  height: 100%;

  margin: 0 auto;

}

/* End 基本样式 */

.banner{

  width: 100%;

}

.item{

  width: 100%;

  display: flex;

  flex-direction: row;

}

.item img{

  width: 100%;

}

.page{

    display: flex;

    flex-direction: row;

    width: 100%;

    position: absolute;

    bottom: 20px;

}

.page ul{

display: flex;

    flex-direction: row;

    margin: 0 auto;

}

.page li{

  padding:0 5px;

}

.number:hover{

  color: red;

  font-weight: bold;

}

 

 

 // 圆点的点击事件

    gotoPage (index) {

      // 将index赋值给图片的下标currentIndex

      this.currentIndex = index

    },

    // 点击事件的函数

    // 上一张

    prevIndex () {

      // eslint-disable-next-line eqeqeq

      if (this.currentIndex == 0) {

        return this.dataList.length - 1

      } else {

        return this.currentIndex - 1

      }

    },

    // 下一张

    nextIndex () {

      // eslint-disable-next-line eqeqeq

      if (this.currentIndex == this.dataList.length - 1) {

        return 0

      } else {

        return this.currentIndex + 1

      }

    },

    // 定时器

    runInv () {

      this.timer = setInterval(() => {

        this.gotoPage(this.nextIndex)

      }, 1000)

    }

  }

 

data () {

    return {

      dataList: ['https://i1.mifile.cn/a4/xmad_15535933141925_ulkYv.jpg', 'https://i1.mifile.cn/a4/xmad_15532384207972_iJXSx.jpg', 'https://i1.mifile.cn/a4/xmad_15517939170939_oiXCK.jpg'],

      currentIndex: 0, // 默认显示图片

      timer: null // 定时器

    }

 

 <div class="banner">

      <div class="item">

        <img :src="dataList[currentIndex]" alt="加载中。。。">

      </div>

      <div class="page" v-if="this.dataList.length > 1">

        <ul>

          <li @click="gotoPage(prevIndex)">&lt;</li>

          <li v-for="(item,index) in dataList" @click="gotoPage(index)" :class="{'current':currentIndex == index}" v-bind:key="index" class="number">{{index+1}}</li>

          <li @click="gotoPage(nextIndex)">&gt;</li>

        </ul>

      </div>

    </div>