轮播图淡入淡出的效果实现-----微信小程序

墨水不多，直接上图： 淡入淡出轮播图.gif

文采不够，直接上码：

index.wxml:

<view class="banner">
  <image class="pic" src="../../images/banner1.jpg" animation="{{num==0?showpic:hidepic}}"/>
  <image class="pic" src="../../images/banner2.jpg" animation="{{num==1?showpic:hidepic}}"/>
  <image class="pic" src="../../images/banner3.jpg" animation="{{num==2?showpic:hidepic}}"/>
</view>

index.wxss:

.banner{
    width:750rpx;
    height:600rpx;
    position: relative;
}
.pic{
    display:block;
    width:750rpx;
    height:600rpx;   
    position:absolute; 
    top:0;
    left:0;
}

index.js：

Page({
  data:{
        setTime:'',
        num:0,
        showpic:null,
        hidepic:null,
  },
  onLoad:function(){
    var _this=this;
    var num=_this.data.num;
    var animation= wx.createAnimation({}) //创建一个动画实例
    _this.setData({
      //创建一个计时器
        setTime:setInterval(function(){
            _this.setData({
                num:num++
            })

            if(num>2){
              num=0;
            }
           //淡入
            animation.opacity(1).step({
                  duration:1500
            }) //描述动画
            _this.setData({
                showpic:animation.export()
            }) //输出动画
          //淡出
            animation.opacity(0).step({duration:1500})
            _this.setData({hidepic:animation.export()})
      },4000)
    })
  }
})

刚接触小程序不久，对小程序的理解不是很到位。希望给自己备忘的同时可以帮到有需要的你。