zhongde-website/components/home/banner.vue

<template>
  <div id="index-banner">
    <div
      class="swiper swiperBox"
      v-swiper:swiper="bannerSwiperOption"
      :cleanup-styles-on-destroy="false"
      @ready="onSwiperRedied">
      <div class="swiper-wrapper">
        <div v-for="(item, index) in bannerData" :key="index" class="swiper-slide">
          <a :href="item.href" target="_blank">
            <img :src="item.bannerSrc" :alt="item.bannerAlt">
          </a>
        </div>
      </div>
      <div class="channelAdvantage btnPrev" slot="button-prev" @click="prev">
        <div class="el-icon-arrow-left"></div>
      </div>
      <div class="channelAdvantage btnNext" slot="button-next" @click="next">
        <div class="el-icon-arrow-right"></div>
      </div>
    </div>
    <div class="banner-swiper-pagination" slot="pagination"></div>
  </div>
</template>

<script>
export default {
  name: "VBanner",
  props: {
    //bannerData为对象，里面的data属性包含着图片的数组
    bannerData: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      isLeft: true,
      currentIndex: 0,
      timer: "",
      clickTime: 0,
      bannerSwiperOption: {
        // 配置说明直接看官网
        slidesPerView: "auto",
        paginationClickable: true,
        // slidesOffsetBefore: 100,
        // slidesOffsetAfter: 100,
        autoplay: {
          delay: 3500,
          disableOnInteraction: false,
        },
        speed: 1000,
        loop: true,
        observer: true,
        observeParents: true,
        autoplayDisableOnInteraction: false,
        notNextTick: true,
        // centeredSlides: true,
        navigation: {
          nextEl: ".btnNext",
          prevEl: ".btnPrev",
        },
        pagination: {
          el: ".banner-swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  created() {
    //在DOM加载完成后，下个tick中开始轮播
    this.$nextTick(() => {
      this.timer = setInterval(() => {
        this.autoPlay();
      }, 4000);
    });
  },
  methods: {
    go() {
      this.timer = setInterval(() => {
        this.autoPlay();
      }, 4000);
    },
    stop() {
      clearInterval(this.timer);
      this.timer = null;
    },
    change(index) {
      this.currentIndex = index;
    },
    autoPlay() {
      this.isLeft = true;
      this.currentIndex++;
      if (this.currentIndex > this.bannerData.length - 1) {
        this.currentIndex = 0;
      }
    },
    prev() {
      if (new Date() - this.clickTime > 850) {
        this.isLeft = false;
        this.currentIndex--;
        if (this.currentIndex < 0) {
          this.currentIndex = this.bannerData.length - 1;
        }

        this.clickTime = new Date();
      }
    },
    next() {
      if (new Date() - this.clickTime > 850) {
        this.isLeft = true;
        this.currentIndex++;
        if (this.currentIndex > this.bannerData.length - 1) {
          this.currentIndex = 0;
        }

        this.clickTime = new Date();
      }
    },
    onSwiperRedied(swiper) {
      console.log('Swiper redied!', swiper)
    },
  },
};
</script>

<style lang="scss">
#index-banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  // height: 540px;
  height: 595px;
  .swiperBox {
    height: 100%;
    &:hover {
      .channelAdvantage {
        transform: 0.3s;
        display: block;
      }
    }
    .swiper-wrapper {
      width: 100%;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .banner-swiper-pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 65px;
    z-index: 66;
    .swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      background: #FFFFFF;
      opacity: 0.50;
      margin: 0 11px;
      &:focus {
        outline: none;
      }
      &.swiper-pagination-bullet-active {
        width: 45px;
        height: 12px;
        background: #FFFFFF;
        border-radius: 100px;
        opacity: 1;
      }
    }
  }
}

.channelAdvantage {
  display: none;
  position: absolute;
  width: 84px;
  height: 84px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  outline: 0;
  cursor: pointer;
  text-align: center;
  line-height: 84px;
  color: #FFFFFF;
  background: rgba(0,0,0,.2);
  &.btnNext {
    right: 0;
  }
  &.btnPrev {
    left: 0;
  }
  div {
    height: 84px;
    line-height: 84px;
    font-size: 32px;
  }
 }

.i-b-container {
  position: relative;
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}

.i-b-tab {
  position: absolute;
  left: 50%;
  bottom: 27px;
  width: 62px;
  height: 10px;
  margin-left: -30px;
}

.b-c-part {
  position: absolute;
  top: 0;
  left: 50%;
  overflow: hidden;
  width: 1920px;
  height: 100%;
  margin-left: -960px;
}

.b-c-part img {
  display: block;
  width: 100%;
  height: 100%;
}

.i-b-btn {
  position: relative;
  width: 1200px;
  margin: 0 auto;
}

.btn-pre {
  position: absolute;
  top: -340px;
  left: -155px;
  width: 18px;
  height: 21px;
  background: url('~assets/images/index/banner-btn-pre.png') center center no-repeat;
  cursor: pointer;
}

.btn-next {
  position: absolute;
  top: -340px;
  right: -155px;
  width: 18px;
  height: 21px;
  background: url('~assets/images/index/banner-btn-next.png') center center no-repeat;
  cursor: pointer;
}

.btn-pre:hover {
  background: url('~assets/images/index/banner-btn-pre-cur.png') center center no-repeat;
}

.btn-next:hover {
  background: url('~assets/images/index/banner-btn-next-cur.png') center center no-repeat;
}

.listNext-enter-to {
  transition: all 1s ease;
  transform: translateX(0);
}

.listNext-leave-active {
  transition: all 1s ease;
  transform: translateX(-100%);
}

.listNext-enter {
  transform: translateX(100%);
}

.listNext-leave {
  transform: translateX(0);
}

.listPrev-enter-to {
  transition: all 1s ease;
  transform: translateX(0);
}

.listPrev-leave-active {
  transition: all 1s ease;
  transform: translateX(100%);
}

.listPrev-enter {
  transform: translateX(-100%);
}

.listPrev-leave {
  transform: translateX(0);
}
</style>