小程序的轮播图变化改变背景图

需求效果图：

         首页将一张大的背景图把轮播图图片裁剪出来，轮播图的排版你们OK滴，背景图是多张<image>提前加载好在同一个地方叠起来的，多张背景图的css动画切换，切出的图片淡出效果透明度从1到0，切入的照片透明度从0到1。不建议用单张<image>切换src方法，图片切换加载的时候会出现空白闪屏，不够丝滑，上代🐎。

wxml：

<block wx:for-items="{{swiperimg}}" wx:key="index" wx:for-item="item">
      <image mode="widthFix" class="swiperimg {{swiperimgindex==index?'fade-in':'fade-out'}}" src="{{item}}"/>
</block>

swiperimg：背景图组 ['图片1链接','图片2链接']

swiperimgindex:轮播图当前的序号

js:

bindChange: function (e) {
    var currentNum = e.detail.current;
    this.setData({
      swiper_num: currentNum,
      swiperimgindex: currentNum,
    })
},

wxss:

.fade-out {
  animation: fadeOut 1s ease-out;
  z-index: -1;
}
.fade-in {
  animation: fadeIn 1s ease-out;
  z-index: 0;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

就这样，收工～