vue实现模糊轮播图

实现模糊轮播图的方法

模糊轮播图可以通过Vue结合CSS滤镜和动画效果实现。以下是具体实现步骤：

安装Vue及相关依赖 确保项目已安装Vue和vue-awesome-swiper（用于轮播功能）：

npm install vue-awesome-swiper

组件基础结构 创建一个Vue组件，引入swiper并设置基础轮播结构：

<template>
  <swiper :options="swiperOption" class="blur-swiper">
    <swiper-slide v-for="(item, index) in slides" :key="index">
      <img :src="item.image" :class="{ 'blur-active': activeIndex === index }">
    </swiper-slide>
  </swiper>
</template>

CSS模糊效果 添加CSS滤镜实现模糊效果，通过transition实现平滑过渡：

.blur-swiper img {
  filter: blur(5px);
  transition: filter 0.5s ease;
}
.blur-swiper .blur-active {
  filter: blur(0);
}

JavaScript逻辑 在Vue组件中设置swiper配置和激活索引监听：

export default {
  data() {
    return {
      slides: [
        { image: 'image1.jpg' },
        { image: 'image2.jpg' }
      ],
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        on: {
          slideChange: () => {
            this.activeIndex = this.$refs.swiper.swiper.realIndex;
          }
        }
      },
      activeIndex: 0
    }
  }
}

高级配置（可选）

1. 动态调整模糊强度：

   computed: {
   blurStrength() {
    return 8 - Math.abs(this.activeIndex - this.currentSlideIndex) * 2;
   }
   }

2. 添加背景扩散效果：

   .swiper-slide {
   transform: scale(1.05);
   transition: transform 0.5s ease;
   }

注意事项

• 图片预加载可避免模糊过渡时的闪烁
• 移动端需添加touch事件处理
• 性能优化：对模糊效果使用will-change属性
• 兼容性处理：添加-webkit-filter前缀

通过以上方法可以实现具有视觉吸引力的模糊轮播效果，核心原理是通过CSS filter属性和Vue的动态class绑定控制当前激活幻灯片的清晰度。