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

 

 以下代码的淡入淡出是切换图片的时候动画效果显示的。需要用其他方式，可以基于这个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"