轮播+点击切换

1s轮播切换不同页面
点击右上角不同按钮切换不同内容
鼠标移入停止轮播，鼠标离开继续轮播

html结构

    <div
      class="mainStyle"
      @mouseenter="stopScroll"
      @mouseleave="startTabScroll"
    >
      <div class="mainTitle">
        标题
        <div class="tab">
          <ul class="ul-tab">
            <li @click="changeActTab('1')" :class="{ act: currentTab === '1' }">
              1
            </li>
            <li @click="changeActTab('2')" :class="{ act: currentTab === '2' }">
              2
            </li>
            <li @click="changeActTab('3')" :class="{ act: currentTab === '3' }">
              3
            </li>
          </ul>
        </div>
      </div>
      <div class="mainCont" v-if="currentTab === '1'">
        <div class="item1"></div>
      </div>
      <div class="mainCont" v-if="currentTab === '2'">
        <div class="item2"></div>
      </div>
      <div class="mainCont" v-if="currentTab === '3'">
        <div class="item3"></div>
      </div>
    </div>

data（）

  data() {
    return {
      currentTab: "1",
      tabnum: 0,
      currentTabArr: ["1", "2", "3"],
    };
  },

mounted

  mounted() {
    this.startTabScroll();
  },

methods

  methods: {
    changeActTab(tab) {
      this.currentTab = tab;
    },
    changeTabnum() {
      this.tabnum--;
      if (this.tabnum < 0) {
        this.tabnum = this.currentTabArr.length - 1;
      }
      this.currentTab = this.currentTabArr[this.tabnum];
      this.changeActTab(this.currentTab);
    },
    startTabScroll() {
      this.tabTimId = setInterval(() => {
        this.changeTabnum();
      }, 1000);
    },
    stopScroll() {
      clearInterval(this.tabTimId);
    },
  },

样式

<style lang="less">
.mainStyle {
  width: 700px;
  height: 400px;
  margin: 0 auto;
  background-color: aquamarine;
  .mainTitle {
    position: relative;
    font-size: 30px;
    .tab {
      display: flex;
      justify-content: center;
      position: absolute;
      top: 5px;
      right: 5px;
      z-index: 999;
      .ul-tab {
        border: 1px solid rgb(55, 125, 171);
        height: 28px;
        display: flex;
        li {
          padding: 0 10px;
          cursor: pointer;
          font-size: 15px;
          color: #fff;
          height: 100%;
          display: flex;
          align-items: center;
          &:hover {
            box-shadow: inset 0 0 20px rgb(55, 125, 171);
            border: 1px solid rgb(55, 125, 171);
          }
          &.act {
            box-shadow: inset 0 0 20px rgb(55, 125, 171);
            border: 1px solid rgb(55, 125, 171);
          }
        }
      }
    }
  }
  .mainCont {
    height: 100%;
    width: 100%;
    .item1 {
      height: 100%;
      width: 100%;
      background-color: burlywood;
    }
    .item2 {
      height: 100%;
      width: 100%;
      background-color: blueviolet;
    }
    .item3 {
      height: 100%;
      width: 100%;
      background-color: rgb(43, 226, 64);
    }
  }
}
</style>

完整代码

<template>
  <div class="container">
    <div
      class="mainStyle"
      @mouseenter="stopScroll"
      @mouseleave="startTabScroll"
    >
      <div class="mainTitle">
        标题
        <div class="tab">
          <ul class="ul-tab">
            <li @click="changeActTab('1')" :class="{ act: currentTab === '1' }">
              1
            </li>
            <li @click="changeActTab('2')" :class="{ act: currentTab === '2' }">
              2
            </li>
            <li @click="changeActTab('3')" :class="{ act: currentTab === '3' }">
              3
            </li>
          </ul>
        </div>
      </div>
      <div class="mainCont" v-if="currentTab === '1'">
        <div class="item1"></div>
      </div>
      <div class="mainCont" v-if="currentTab === '2'">
        <div class="item2"></div>
      </div>
      <div class="mainCont" v-if="currentTab === '3'">
        <div class="item3"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: "1",
      tabnum: 0,
      currentTabArr: ["1", "2", "3"],
    };
  },
  mounted() {
    this.startTabScroll();
  },
  methods: {
    changeActTab(tab) {
      this.currentTab = tab;
    },
    changeTabnum() {
      this.tabnum--;
      if (this.tabnum < 0) {
        this.tabnum = this.currentTabArr.length - 1;
      }
      this.currentTab = this.currentTabArr[this.tabnum];
      this.changeActTab(this.currentTab);
    },
    startTabScroll() {
      this.tabTimId = setInterval(() => {
        this.changeTabnum();
      }, 1000);
    },
    stopScroll() {
      clearInterval(this.tabTimId);
    },
  },
};
</script>

<style lang="less">
.mainStyle {
  width: 700px;
  height: 400px;
  margin: 0 auto;
  background-color: aquamarine;
  .mainTitle {
    position: relative;
    font-size: 30px;
    .tab {
      display: flex;
      justify-content: center;
      position: absolute;
      top: 5px;
      right: 5px;
      z-index: 999;
      .ul-tab {
        border: 1px solid rgb(55, 125, 171);
        height: 28px;
        display: flex;
        li {
          padding: 0 10px;
          cursor: pointer;
          font-size: 15px;
          color: #fff;
          height: 100%;
          display: flex;
          align-items: center;
          &:hover {
            box-shadow: inset 0 0 20px rgb(55, 125, 171);
            border: 1px solid rgb(55, 125, 171);
          }
          &.act {
            box-shadow: inset 0 0 20px rgb(55, 125, 171);
            border: 1px solid rgb(55, 125, 171);
          }
        }
      }
    }
  }
  .mainCont {
    height: 100%;
    width: 100%;
    .item1 {
      height: 100%;
      width: 100%;
      background-color: burlywood;
    }
    .item2 {
      height: 100%;
      width: 100%;
      background-color: blueviolet;
    }
    .item3 {
      height: 100%;
      width: 100%;
      background-color: rgb(43, 226, 64);
    }
  }
}
</style>