vue轮播图

   <div class="showImg">
      <!-- <img src="../../image/banner1.jpg" style="width: 200px;height: 230px;"> -->
      <!-- 轮播图片 -->
      <img
        v-for="(item) in imgArr"
        v-show="item.id===currentIndex"
        :key="item.id"
        :src="item.url"
        alt="暂无图片"
        @mouseover="changeInterval(true)"
        @mouseleave="changeInterval(false)"
      >
      <!-- 左侧按钮 -->
      <div class="iconDiv icon-left" @click="clickIcon('up')">
        <i class="el-icon-caret-left" />
      </div>
      <!-- 右侧按钮 -->
      <div class="iconDiv icon-right" @click="clickIcon('down')">
        <i class="el-icon-caret-right" />
      </div>
      <!-- 控制圆点 -->
      <div class="banner-circle">
        <ul>
          <li
            v-for="(item) in imgArr"
            :key="item.id"
            :class="item.id===currentIndex? 'active': '' "
            @click="changeImg(item.id)"
          />
        </ul>
      </div>
    </div>

 currentIndex: 0, // 当前所在图片下标
      timer: null, // 定时轮询
      imgArr: [{
        id: 0,
        url: require('../../image/banner1.jpg')
      }, {
        id: 1,
        url: require('../../image/banner2.jpg')
      }, {
        id: 2,
        url: require('../../image/banner3.jpg')
      }, {
        id: 3,
        url: require('../../image/banner4.jpg')
      }],

  // 进入页面后启动定时轮询
  mounted() {
    this.startInterval()
  }, 
// 开启定时器
    startInterval() {
      // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.currentIndex++
        if (this.currentIndex > this.imgArr.length - 1) {
          this.currentIndex = 0
        }
      }, 3000)
    },
    // 点击左右箭头
    clickIcon(val) {
      if (val === 'down') {
        this.currentIndex++
        if (this.currentIndex === this.imgArr.length) {
          this.currentIndex = 0
        }
      } else {
        /* 第一种写法
					this.currentIndex--;
					if(this.currentIndex < 0){
						this.currentIndex = this.imgArr.length-1;
					} */
        // 第二种写法
        if (this.currentIndex === 0) {
          this.currentIndex = this.imgArr.length
        }
        this.currentIndex--
      }
    },
    // 点击控制圆点
    changeImg(index) {
      this.currentIndex = index
    },
    // 鼠标移入移出控制
    changeInterval(val) {
      if (val) {
        clearInterval(this.timer)
      } else {
        this.startInterval()
      }
    },

<style>
	* {
		padding: 0;
		margin: 0;
	}

	/* 清除li前面的圆点 */
	li {
		list-style-type: none;
	}

	.showImg {
		position: relative;
		width: 40%;
		height: 250px;
		margin: 100px auto;
		overflow: hidden;
	}

	/* 轮播图片 */
	.showImg img {
		width: 100%;
		height: 100%;
	}

	/* 箭头图标 */
	.iconDiv {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 30px;
		height: 30px;
		border: 1px solid #666;
		border-radius: 15px;
		background-color: rgba(125, 125, 125, .2);
		line-height: 30px;
		text-align: center;
		font-size: 25px;
		cursor: pointer;
	}

	.iconDiv:hover {
		background-color: white;
	}

	.icon-left {
		left: 10px;
	}

	.icon-right {
		right: 10px;
	}

	/* 控制圆点 */
	.banner-circle {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 20px;
	}

	.banner-circle ul {
		margin: 0 50px;
		height: 100%;
		text-align: right;
	}

	.banner-circle ul li {
		display: inline-block;
		width: 14px;
		height: 14px;
		margin: 0 5px;
		border-radius: 7px;
		background-color: rgba(125, 125, 125, .8);
		cursor: pointer;
	}

	.active {
		background-color: black !important;
	}
</style>