微信小程序图片展示淡入淡出纯WXSS实现，无需使用消耗性能的动画引擎

 

进入下面小程序可以体验效果：

 

 以下代码的淡入淡出是切换图片的时候动画效果显示的。需要用其他方式，可以基于这个wxss修改即可

原理就是，图片默认样式的opacity 是 0，通过变量改变样式的opacity即可，然后需要有transition: all 1s 这个属性加持

1、WXML

<block wx:for="{{posterList}}" wx:key="index">
    <view class="{{currentIndex==index?'banner-active':''}}">
        <image class="pic-g banner-vie" mode="aspectFill" style="z-index: {{index==currentIndex?2:0}};" src="{{item.url}}">image>
    view>
block>

2、wxss 

  .pic-g{
    position: fixed;
    width: 100%;
  }
 
  .banner-vie{
    width: 100%;
    transition: all 1s;
    opacity: 0;
  }
  
  .banner-active .banner-vie{
    width: 100%;
    transition: all 1s;
    opacity: 1;
  }

3、JS

具体的JS事件方式，根据自己的需求处理即可。

以上代码逻辑原理：

        循环多个image 标签

        使用js事件切换到不同的标签

        然后根据索引判断哪个标签使用 显性 class="banner-active"