网易云课堂vue渐入式轮播图

<template>
  <div
    class="home-swapper"
    :style="{background: bgColor}"
  >
    <single-page>
      <transition-group
        name="flip-list"
        tag="ul"
      >
        <li
          v-for="t in currImgs"
          :key="t.picture_url"
          class="img-item"
        >
          <img
            :src="t.picture_url"
            alt=""
          >
        </li>
      </transition-group>
      <ul class="index-list">
        <li
          v-for="(t, i) in swapper"
          :key="i"
          :class="{'active':index === i}"
          @mouseover="manualChange(i)"
        />
      </ul>
      <div class="ctrl">
        <div
          class="left"
          @click="preBanner"
        >
          <i class="fa fa-angle-left" />
        </div>
        <div
          class="right"
          @click="nextBanner"
        >
          <i class="fa fa-angle-right" />
        </div>
      </div>
    </single-page>
  </div>
</template>

<script>
export default {
  props: {
    swapper: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      currImgs: [],
      bgColor: '',
      index: 0,
      autoChange: '',
    }
  },
  mounted() {
    this.currImgs = [this.swapper[0]]
    this.bgColor = this.currImgs[0].background_color
    this.startChange()
  },
  methods: {
    startChange() {
      clearInterval(this.autoChange)
      this.autoChange = setInterval(() => {
        if (this.index < this.swapper.length - 1) {
          this.index++
        } else {
          this.index = 0
        }
        this.setBanner()
      }, 4000)
    },
    manualChange(i) {
      clearInterval(this.autoChange)
      this.index = i
      this.delayChange()
    },
    setBanner() {
      this.currImgs.splice(0, 1, this.swapper[this.index])
      this.bgColor = this.currImgs[0].background_color
    },
    preBanner() {
      if (this.index === 0) {
        this.index = this.swapper.length
      }
      this.index--
      this.manualChange(this.index)
    },
    nextBanner() {
      if (this.index === this.swapper.length - 1) {
        this.index = -1
      }
      this.index++
      this.manualChange(this.index)
    },
    delayChange() {
      this.setBanner()
      setTimeout(() => {
        this.startChange()
      }, 2000)
    },
  },
}
</script>

<style lang="scss" scoped>
.home-swapper {
  height: 515px;
  background: rgb(96, 123, 239);
  .img-item {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    list-style: none;
    img {
      padding: 0 15px;
      width: 100%;
      height: 515px;
    }
  }
  .index-list {
    position: absolute;
    right: calc(50% - 180px);
    bottom: 18px;
    padding: 0;
    list-style: none;
    li {
      float: left;
      width: 10px;
      height: 10px;
      margin-right: 15px;
      border-radius: 5px;
      background: #ddd;
      opacity: 0.4;
      cursor: pointer;
      &.active {
        background: #fff;
        opacity: 1;
      }
    }
  }
  .ctrl {
    position: absolute;
    width: 100%;
    top: 50%;
    > div {
      position: absolute;
      width: 40px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      opacity: 0.4;
      font-size: 40px;
      color: #fff;
      cursor: pointer;
      transform: translateY(-50%);
    }
    .left {
      left: 300px;
    }
    .right {
      right: 60px;
    }
  }
}
@media screen and (max-width: 750px) {
  .home-swapper {
    height: 300px;
    img {
      height: 300px !important;
    }
    .index-list {
      right: 50%;
      transform: translateX(50%);
    }
    .ctrl {
      display: none;
    }
  }
}
</style>
<style lang="scss">
.home-swapper {
  .container {
    position: relative;
    margin-top: 0 !important;
    height: 100%;
    ul,
    li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .flip-list-enter-active {
      transition: all 1s;
    }
    .flip-list-enter,
    .flip-list-leave-active {
      opacity: 0;
    }
  }
}
</style>