轮播图后面的背景随着图变色的效果

Posted 2020-11-27 qhantime

<template>
  <div class="content" ref="bgColor">
    <div class="box">
      <div class="swiper-container " @mouseover="mouseOver()" @mouseleave="mouseOut()">
        <div class="swiper-wrapper">
          <div v-for=‘(item,index) in arrItem‘ class="swiper-slide" :key="index">
            <img class="img" :src="item.imgUrl">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  import Swiper from "swiper"
  import "../../../node_modules/swiper/css/swiper.css";

  export default {
    name: "testInfo",

    data() {
      return {
        show: false,
        arrItem: [
          {
            name: ‘swiperSlide5‘,
            imgUrl: require(‘../../img/swiper/1.png‘)
          },
          {
            name: ‘swiperSlide1‘,
            imgUrl: require(‘../../img/swiper/2.jpg‘)
          },
          {
            name: ‘swiperSlide51‘,
            imgUrl: require(‘../../img/swiper/3.jpg‘)
          },
          {
            name: ‘swiperSlide1111115‘,
            imgUrl: require(‘../../img/swiper/4.jpg‘)
          }
        ]

      }
    },
    mounted() {
      const Swiper2 = new Swiper(‘.swiper-container‘, {
        loop: true,
        autoplay: true,
        pagination: ‘.swiper-P1‘,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false  //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
        },
        pagination: {
          el: ‘.swiper-pagination‘,
          clickable: true  //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
        },
        //slide的切换效果，默认为"slide"（位移切换），可设置为‘slide‘（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
        effect: ‘slide‘,
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ‘.swiper-button-next‘,
          prevEl: ‘.swiper-button-prev‘
        }
      })
      //背景颜色随轮播图片而改变
      const bgColor = this.$refs.bgColor;
      Swiper2.on(‘slideChangeTransitionEnd‘, function () {
        if ((Swiper2.realIndex) == 0) {
          bgColor.style.transition = "all 0.1s";
          bgColor.style.backgroundColor = "#F3BAC1";
        } else if ((Swiper2.realIndex) == 1) {
          bgColor.style.transition = "all 0.1s";
          bgColor.style.backgroundColor = "#A9282A";
        } else if ((Swiper2.realIndex) == 2) {
          bgColor.style.transition = "all 0.1s";
          bgColor.style.backgroundColor = "#5496A0";
        } else if ((Swiper2.realIndex) == 3) {
          bgColor.style.transition = "all 0.1s";
          bgColor.style.backgroundColor = "#E6E6E6";
        }
      });
    },
    methods: {
      //前进后退按钮的显示与隐藏
      mouseOver() {
        this.show = true;
      },
      mouseOut() {
        this.show = false;
      }

    }

  }
</script>
<style scoped>
  .content {
    width: 100%;
    background-color: #F3BAC1;
    height: 456px;
  }

  .box {
    width: 980px;
    margin: 0 auto;
    padding: 30px 0px;
  }

  .swiper-container {
    width: 980px;
    height: 400px;
    display: inline-block;
  }

  .img {
    width: 980px;
    height: 400px;
  }

</style>


//自定义分页器的样式
<style>
  .swiper-pagination-bullet {
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 100%;
    background: #fff;
  }

  .swiper-pagination-bullet-active {
    background-color: pink;
  }
</style>