用vue写一个定时器自动轮播

先看一下完成的效果图

这是一个自动轮播播放图，来让我们看一下代码：（用到的共呢个主要是定时器）

通过flex布局分成左右两部分mainL和mainR

      <div class="mainContent">
        <div class="mainL">
          <div class="contentInfo" v-for="(item, index) in articleList" :key="index" @mouseenter="changeImgBtn(index)" @mouseleave="restore">
          <!-- 判断文字左边的图标，当是选中状态的时候，将其变为蓝色 -->
            <img :src="index == hoverImg ? item.imghover : item.img" alt="" />   
            <div class="contentInfoTitle">
            <!-- 判断文字是否是选中状态，然后相应的改变选中和没有被选中的样式 -->
              <h3 id="bankbar" :class="[index == hoverImg ? 'test' : '']">{{ item.ranklist}}</h3>
              <h4>{{ item.ranklistContent }}</h4>
            </div>
          </div>
        </div>
        <!-- 右边部分对应的图片，第一部分对应的是第一张图片，第二部分对应的是第二张图片，第三部分对应的是第三张图片-->
        <div class="mainR">
          <img src="../assets/phoneranklist.png" alt="" v-if="hoverImg == 0" width="50%" />
          <img src="../assets/phonedetail.png" alt="" v-if="hoverImg == 1" width="50%" />
          <img src="../assets/phonecompare.png" alt="" v-if="hoverImg == 2" width="90%" />
        </div>
      </div>
      

先来看一下created和data里面的数据逻辑

created() {
// 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器
 clearInterval(this.timer)
 this.timer = null
//当程序进来的时候，打开定时器，令起自动轮播
    this.timer = setInterval(() => {
      this.hoverImg++;
      if (this.hoverImg == 3) {
        this.hoverImg = 0;
      }
    }, 1000);
  },
  data() {
    return {
      timer: null,//刚开始的时候令timer的初始值等于null
      hoverImg: 0,
      articleList: [
        {
          id: 0,
          ranklist: "银行理财产品排行榜",
          ranklistContent: "“今日在售 业绩TOP10”",
          img: require("../assets/ranklist.png"),
          imghover: require("../assets/ranklistblue.png"),
        },
        {
          id: 1,
          ranklist: "理财产品详细信息",
          ranklistContent: "“每一个你关心的细节 这里都能看到”",

          img: require("../assets/detail.png"),
          imghover: require("../assets/detailblue.png"),
        },
        {
          id: 2,
          ranklist: "自选产品大PK",
          ranklistContent: "“心仪产品对比 一目了然”",
          img: require("../assets/product.png"),
          imghover: require("../assets/productblue.png"),
        },
      ],
    };
  },

然后再看一下methods里面的方法

 methods: {
 //当鼠标悬停的时候关闭定时器
    changeImgBtn(index) {
      this.hoverImg = index;
      console.log(this.hoverImg);
      clearInterval(this.timer);
    },
    当鼠标离开的时候打开定时器
    restore() {
      this.timer = setInterval(() => {
        this.hoverImg++;
        if (this.hoverImg == 3) {
          this.hoverImg = 0;
        }
      }, 1000);
    },
  },

接下来，在页面销毁之前我们要把定时器给关闭 在beforeDestroy里面操作

beforeDestroy() {
    // 在页面注销前，将定时器给关闭
    clearInterval(this.timer);
    this.timer = null;
  }

最后看一下css样式

.mainContent {
  display: flex;
  justify-content: space-between;
}

.mainL {
  width: 540px;
}

.mainR {
  width: 560px;
  height: 335px;
  text-align: center;
}

.contentInfo {
  display: flex;
  align-items: flex-start;
  height: 150px;
}

.contentInfo img {
  width: 38px;
  height: 38px;
  margin-right: 44px;
}

.contentInfoTitle {
  text-align: left;
  transition: ease-in-out;
}
/*文字正常的样式*/
.contentInfoTitle h3,
.contentInfoTitle h4 {
  margin: 0;
  font-family: PingFangSC-Regular, PingFang SC;
  text-align: left;
  /*放大时间为0.3秒*/
  transition: all 0.3s;
  transform-origin: (left, bottom);
}
.contentInfoTitle h3 {
  display: inline-block;
  font-size: 26px;
  font-weight: bold;
  border-bottom: 6px solid #ef8449;
  height: 50px;
}
/*文字被选中之后的样式，放大0.3倍*/
.test {
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #184a93;
  line-height: 30px;
  transform: scale(1.1);
  transform-origin: (left, bottom);
}

.contentInfoTitle h4 {
  margin-top: 21px;
  font-size: 22px;
  font-weight: normal;
  margin-bottom: 61px;
}

.contentInfoTitle:hover h4 {
  background: #f3f6fa;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: normal;
  color: #184a93;
}