js+css3实现轮转菜单栏

上图 代码：

<template>
  <div class="menu-container">
    <div class="menu-items">
      <img class="arrow-left" src="@/assets/images/menu/arrow-left.png" @click="leftClick">
      <img class="arrow-right" src="@/assets/images/menu/arrow-right.png" @click="rightClick">
      <img class="item item1" src="@/assets/images/menu/图标1-100.png">
      <img class="item item2" src="@/assets/images/menu/图标2-100.png">
      <img class="item item3" src="@/assets/images/menu/图标4-100.png">
      <img class="item item4" src="@/assets/images/menu/图标3-100.png">
    </div>
  </div>
</template>
<script>

export default {
  name: '',
  components: {
  },
  filters: {
  },
  data() {
    return {
      menuIds: [1, 2, 3, 4] // 顺时针
    }
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    async rightClick() {
      let domList = document.getElementsByClassName('item')
      domList = Array.from(domList)
      await domList.forEach(dom => {
        // 取出第二个className
        const domNameList = dom.className.split(' ')
        const domName = domNameList[1]
        // 判断是当前dom处于哪一个位置，继续往下一个位置移动
        if (domName == 'item' + this.menuIds[0]) {
          dom.style.left = `575px`
          dom.style.top = `52px`
          dom.style.zIndex = `3`
          dom.style.opacity = `0.8`
          dom.style.transition = `left 1s linear,top 1s linear`
          dom.style.transform = `scale(.9)`
        } else if (domName == 'item' + this.menuIds[1]) {
          dom.style.left = `375px`
          dom.style.top = `67px`
          dom.style.zIndex = `4`
          dom.style.opacity = `1`
          dom.style.transition = `left 1s linear,top 1s linear`
          dom.style.transform = `scale(1)`
        } else if (domName == 'item' + this.menuIds[2]) {
          dom.style.left = `175px`
          dom.style.top = `52px`
          dom.style.zIndex = `2`
          dom.style.opacity = `0.8`
          dom.style.transition = `left 1s linear,top 1s linear`
          dom.style.transform = `scale(.9)`
        } else if (domName == 'item' + this.menuIds[3]) {
          dom.style.left = `375px`
          dom.style.top = `8px`
          dom.style.zIndex = `1`
          dom.style.opacity = `0.5`
          dom.style.transition = `left 1s linear,top 1s linear`
          dom.style.transform = `scale(.8)`
        }
      })
      // 数组往前移 [1,2,3,4]=>[2,3,4,1]
      this.menuIds.push(this.menuIds.shift())
    },
    async leftClick() {
      // 数组后移方法
      const BackTo = (arr, length) => {
        const arr2 = [...arr]
        if (length > arr2.length) {
          length = length % arr2.length
        }
        const cuttedArr = []
        for (let i = 0; i < length; i++) {
          cuttedArr.unshift(arr2[arr2.length - 1])
          arr2.pop()
        }
        const newArr = [...cuttedArr, ...arr2]
        return newArr
      }
      let domList = document.getElementsByClassName('item')
      domList = Array.from(domList)
      // 判断是当前dom处于哪一个位置，继续往下一个位置移动
      await domList.forEach(dom => {
        const domNameList = dom.className.split(' ')
        const domName = domNameList[1]
        if (domName == 'item' + this.menuIds[0]) {
          dom.style.left = `175px`
          dom.style.top = `52px`
          dom.style.zIndex = `3`
          dom.style.opacity = `0.8`
          dom.style.transition = `left 1s linear,top 1s linear`
          dom.style.transform = `scale(.9)`
        } else if (domName == 'item' + this.menuIds[1]) {
          dom.style.left = `375px`
          dom.style.top = `8px`
          dom.style.zIndex = `1`
          dom.style.opacity = `0.5`
          dom.style.transition = `left 1s linear,top 1s linear`
          dom.style.transform = `scale(.8)`
        } else if (domName == 'item' + this.menuIds[2]) {
          dom.style.left = `575px`
          dom.style.top = `52px`
          dom.style.zIndex = `2`
          dom.style.opacity = `0.8`
          dom.style.transition = `left 1s linear,top 1s linear`
          dom.style.transform = `scale(.9)`
        } else if (domName == 'item' + this.menuIds[3]) {
          dom.style.left = `375px`
          dom.style.top = `67px`
          dom.style.zIndex = `4`
          dom.style.opacity = `1`
          dom.style.transition = `left 1s linear,top 1s linear`
          dom.style.transform = `scale(1)`
        }
      })
      // 数组往后移1位 [1,2,3,4]=>[4,1,2,3]
      this.menuIds = BackTo(this.menuIds, 1)
    }
  }
}
</script>
<style scoped lang="scss">
.menu-container {
  // width: 100%;
  width: 1100px;
  height: 293px;

  .menu-items {
    position: relative;
    width: 100%;
    height: 293px;

    .arrow-left {
      width: 58px;
      height: 66px;
      position: absolute;
      left: 68px;
      top: 94px;
      &:hover{
        cursor: pointer;
      }
    }
    .arrow-right {
      width: 58px;
      height: 66px;
      position: absolute;
      right: 123px;
      top: 94px;
      &:hover{
        cursor: pointer;
      }
    }
    .item {
      position: absolute;
      &:hover{
        cursor: pointer;
      }
    }
    .item1 {
      left: 375px;
      top: 67px;
      z-index: 4;
      opacity: 1;
    }
    .item2 {
      left: 175px;
      top: 52px;
      z-index: 3;
      opacity: 0.8;
      transform: scale(.9)
    }
    .item3 {
      left: 375px;
      top: 8px;
      z-index: 1;
      opacity: 0.5;
      transform: scale(.8)
    }
    .item4 {
      left: 575px;
      top: 52px;
      z-index: 2;
      opacity: 0.8;
      transform: scale(.9)
    }
  }
}
</style>