[JavaScript知识库]让对应背景随着轮播的图片变化而改变

使用swiper

cnpm i swiper@5.4.5  --save

然后在main.js里面引入样式
import 'swiper/css/swiper.css'

在需要的页面当中调取import Swiper from "swiper";
然后就可以开始写轮播图了

效果

!<template>
  <div>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img
            src="https://img.alicdn.com/tps/i4/TB1yqAhcpmWBuNjSspdSuvugXXa.jpg"
          />
        </div>
        <div class="swiper-slide">
          <img
            src="https://img.alicdn.com/tps/i4/TB1XVCsaTdYBeNkSmLySutfnVXa.jpg"
          />
        </div>
        <div class="swiper-slide">
          <img
            src="'https://img.alicdn.com/simba/img/TB1ror0cf5TBuNjSspcSuvnGFXa.jpg"
          />
        </div>
        <div class="swiper-slide">
          <img
            src="https://img.alicdn.com/tfs/TB1ed2lggmTBuNjy1XbXXaMrVXa-1130-500.jpg_q100.jpg_.webp"
          />
        </div>
      </div>
      <div class="swiper-pagination pagiation"></div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
export default {
  mounted() {
    const bgColor = this.$refs.bgColor;
    new Swiper(".swiper", {
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  },
};
</script>

<style lang="scss">
.swiper-slide {
  width: 200px;
  height: 100px;
  border: 1px solid red;
  img {
    width: 100%;
    height: 100%;
  }
}
.swiper-pagination-bullets {
  top: 70px !important;
}
</style>

让背景随着轮播的图片变化而改变

轮播的on属性

效果

!<template>
  <div>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img
            src="https://img.alicdn.com/tps/i4/TB1yqAhcpmWBuNjSspdSuvugXXa.jpg"
          />
        </div>
        <div class="swiper-slide">
          <img
          />
        </div>
        <div class="swiper-slide">
          <img
            src="'https://img.alicdn.com/simba/img/TB1ror0cf5TBuNjSspcSuvnGFXa.jpg"
          />
        </div>
        <div class="swiper-slide">
          <img
            src="https://img.alicdn.com/tfs/TB1ed2lggmTBuNjy1XbXXaMrVXa-1130-500.jpg_q100.jpg_.webp"
          />
        </div>
      </div>
      <div class="swiper-pagination pagiation"></div>
    </div>
    <div class="footer" :style="{background:bgColor}" ref="bgColor"></div>
  </div>
</template>
<script>
import Swiper from "swiper";
export default {
  mounted() {
    const bgColor = this.$refs.bgColor;
    new Swiper(".swiper", {
      loop: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      //动态
      on:{
        slideChange:function (e) {
					const i = this.realIndex;
				}
      },
      // 让背景与对应的轮播图颜色保持一致 
      // 这种是静态的 
      // on: {
      //   slideChange: function () {
      //     console.log(this.realIndex);
      //     const i = this.realIndex;
      //     if (i == 0) {
      //       bgColor.style.transition = "all 0.1s";
      //       bgColor.style.backgroundColor = "#F3BAC1";
      //     } else if (i == 1) {
      //       bgColor.style.transition = "all 0.1s";
      //       bgColor.style.backgroundColor = "#A9282A";
      //     } else if (i == 2) {
      //       bgColor.style.transition = "all 0.1s";
      //       bgColor.style.backgroundColor = "#5496A0";
      //     } else {
      //       bgColor.style.transition = "all 0.1s";
      //       bgColor.style.backgroundColor = "#E6E6E6";
      //     }
      //   },
      // },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  },
};
</script>

<style lang="scss">
.swiper-slide {
  width: 200px;
  height: 100px;
  border: 1px solid red;
  img {
    width: 100%;
    height: 100%;
  }
}
.swiper-pagination-bullets {
  top: 70px !important;
}
.footer {
  height: 200px;
  border: 1px solid red;
}
</style>