背景颜色随着轮播图的更换而切换

效果图:

一. 安装swiper(我的swiper版本是"^4.5.0",)
npm install swiper --save
二.局部引入
import Swiper from “swiper”;
import ‘swiper/dist/css/swiper.min.css’;
三.具体代码如下

<template>
  <div class="content" ref="bgColor">
    <div class="box">
      <div class="swiper-container  swiper-no-swiping"     @mouseover="mouseOver()" @mouseleave="mouseOut()">
        <div class="swiper-wrapper">
          <div v-for='(el,index) in arrItem' class="swiper-slide" :key="index">
            <img class="img" :src="el.imgUrl" >
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination swiper-P1"></div>
        <!-- 如果需要导航按钮 -->
        <div v-show="show" >
          <div class="swiper-button-prev mySwiperBtn"></div>
          <div class="swiper-button-next mySwiperBtn"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  //局部引入swiper
  import Swiper from "swiper";
  import 'swiper/dist/css/swiper.min.css';
  export default {
    name: "HelloWorld",
    data(){
      return{
        show:false,
        arrItem:[
          {
            name:'swiperSlide5',
            imgUrl:'https://img.piaoniu.com/misc/0a96578c4b26ee93e852d29d92fa4c1500a96ed9.png'
          },
          {
            name:'swiperSlide1',
            imgUrl:'https://img.piaoniu.com/misc/45f0ba0246de5530b99efbded68349c5b2e22134.jpg'
          },
          {
            name:'swiperSlide51',
            imgUrl:'https://img.piaoniu.com/misc/89447454b6eed4fafecb0ccc221e969a91d0c9d1.jpg'
          },
          {
            name:'swiperSlide1111115',
            imgUrl:'https://img.piaoniu.com/misc/4e8751950e48f80190e3796e2456fb5c21c548e4.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;
  }


  .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E');
    background-size: 20px  20px;
    left: 10px;
    right: auto;
    background-color: black;
    opacity: 0.3;
    width:50px;
    height: 50px;
  }

  .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…2L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E');
    right: 10px;
    background-size: 20px  20px;
    left: auto;
    background-color: black;
    opacity: 0.3;
    width:50px;
    height: 50px;
  }
  .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>