vue2仿轮播--自动切换和点击切换

HTML部分：

<template>
  <div class="banner">
    <!-- 左侧 -->
    <div class="item">
      <img :src="dataList[currentIndex]" />
    </div>
    <!-- 右侧 -->
    <div class="page" v-if="this.dataList.length > 1">
      <div
        @click="gotoPage(index)"
        v-for="(item, index) in titleData"
        :key="index"
        :class="currentIndex == index ? 'current' : 'img-right-btn'"
      >
        <div :class="index == 0 ? 'one-title' : ''">
          {
   
   { item.title }}
        </div>
        <p>{
   
   { item.text }}</p>
      </div>
    </div>
  </div>
</template>

JS部分：

<script>
export default {
  data() {
    return {
      imgList: [
        "https://ee.wpscdn.cn/wpscn/images/skin/dark.b0c0abda.svg",
        "	https://ee.wpscdn.cn/wpscn/images/skin/member.cecd53a6.svg",
        "https://ee.wpscdn.cn/wpscn/images/skin/light.2b28ad8d.svg",
      ],
      titleData: [
        { title: "A", text: "abcd" },
        { title: "B", text: "abcd" },
        { title: "C", text: "abcd" },
      ],
      currentIndex: 0, //默认显示图片
      timer: null, //定时器
    };
  },
  created() {
    this.startUp();
  },
  computed: {
    prevIndex() {
      if (this.currentIndex == 0) {
        return this.imgList.length - 1;
      } else {
        return this.currentIndex - 1;
      }
    },
    //下一张
    nextIndex() {
      if (this.currentIndex == this.imgList.length - 1) {
        return 0;
      } else {
        return this.currentIndex + 1;
      }
    },
  },
  methods: {
    changePage(index) {
      // 改变默认显示
      this.currentIndex = index;
      // 清除计时器
      this.removestartUp();
      // 开始计时器
      this.startUp();
    },
    //计时器
    startUp() {
      this.timer = setInterval(() => {
        this.changePage(this.nextIndex);
      }, 3000);
    },
    // 移除计时器
    removestartUp() {
      clearInterval(this.timer);
    },
  },
};
</script>

CSS部分：

<style lang="scss" scoped>
.banner {
  width: 1226px;
  margin: 0 auto;
  margin-top: 60px;
  display: flex;
  border: 1px dashed #000;
  .item {
    img {
      width: 1010px;
      height: 615px;
      display: block;
    }
  }
  .page {
    width: 221px;
    height: 615px;
    // 未选中状态
    .img-right-btn {
      width: 221px;
      height: 120px;
      margin-top: 65px;
      background: #ecf0f1;
      border-radius: 4px;
      text-align: center;
      padding: 23px 33px 22px 34px;
      box-sizing: border-box;
      cursor: pointer;
      div {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 25px;
        margin-bottom: 10px;
      }
      p {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
      }
    }
    // 选中状态
    .current {
      width: 221px;
      height: 120px;
      margin-top: 65px;
      border-radius: 4px;
      text-align: center;
      padding: 23px 33px 22px 34px;
      box-sizing: border-box;
      cursor: pointer;
      background: #f39c12;
      div {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 25px;
        margin-bottom: 10px;
      }
      p {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
      }
    }
  }
  .page ul {
    float: right;
  }
}
</style>