css缩略图轮播

<template>
  <div class="container">
    <div class="big-box">
      <img :src="`src/assets/temp/${bigImageSrc}`"/>
    </div>

    <div class="small-box">
      <div class="img" v-for="imgUrl in imageSrcs" @mouseover="changeBigImage(imgUrl)" @mouseleave="startTimer">
        <img :src="`src/assets/temp/${imgUrl}`">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bigImageSrc: '1.jpg', // 默认大图地址
      imageSrcs: [ // 小图地址列表
        '1.jpg',
        '2.jpg',
        '3.jpg',
        '4.jpg',
        '5.jpg',
      ],
      count: 0,
      timer: null,
    }
  },
  created() {

  },
  methods: {
    changeBigImage(src) {
      clearInterval(this.timer);
      this.timer = null;
      this.bigImageSrc = src;
    },
    startTimer() {
      this.timer = setInterval(() => {
        if (this.count === 5) {
          this.count = 0;
        }
        this.count++;
        this.bigImageSrc = this.count + ".jpg"
      }, 2000); // 每秒执行一次
    },
  },
  mounted() {
    this.startTimer()
  },
};
</script>

<style scoped>
.container {
  padding: 50px 20vw;
  /* 每个元素之间的间隔相等 */
  justify-content: space-evenly;
  /* 溢出隐藏 */
  text-align: center;
}

.big-box {
  display: flex;
  width: 100%;
  height: 70vh;
  background-size: cover;
}

.small-box {
  margin-top: 10px;
  width: 100%;
  /* 弹性布局 垂直排列 均匀排列每个元素 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.small-box .img {
  width: 10vw;
  height: 12vh;
  transition: 0.5s;
}

.small-box .img img {
  width: 10vw;
  height: 12vh;
  /* 保持原有尺寸比例，裁切长边 */
  object-fit: cover;
  /* 设置过渡 */
  transition: 0.7s;
}

.small-box .img:hover img {
  border: 10px white solid;
}
</style>