微信小程序非swiper组件实现的自定义伪3D轮播图效果示例

<view class=\'idx-content\'>
 <view class=\'idx-swiper\'>
  <view class=\'idx-cswp {{item.swpClass}}\'
    wx:for=\"{{swiperList}}\" wx:key=\"\"
    bindtap=\"swpBtn\"
    data-index=\"{{index}}\">
   <image src=\'{{item.imgsrc}}\' mode=\'widthFix\'></image>
   <view class=\'swp- \' hidden=\"{{item.swpClass!==\'swp-center\'}}\">
    <view class=\'swp-btime\'>{{item.time}}</view>
    <view class=\'swp-bname\'>{{item.bname}}</view>
   </view>
  </view>
 </view>
</view>

.idx-content {
 overflow: hidden;
 padding: 0 40rpx;
}
.idx-content .idx-swiper {
 position: relative;
 margin: 40rpx 0;
 padding-bottom: 100%;
}
.idx-content .idx-swiper .idx-cswp {
 width: 70%;
 height: 100%;
 position: absolute;
 top: 0;
 border-radius: 6px;
}
.idx-content .idx-swiper .idx-cswp image {
 width: 100%;
 max-height: 600rpx;
}
.idx-content .idx-swiper .idx-cswp .swp-  .swp-btime {
 text-align: center;
 font-size: 28rpx;
}
.idx-content .idx-swiper .idx-cswp .swp-  .swp-bname {
 text-align: center;
 font-size: 24rpx;
}
.swp-left {/*左边样式*/
 transition: all .3s ease;
 transform: scale(0.8);
 left: -55%;
}
.swp-center {/*中间样式*/
 left: 15%;
 transition: all .3s ease;
 transform: scale(1);
}
.swp-right {/*右边样式*/
 transition: all .3s ease;
 transform: scale(0.8);
 left: 85%;
}
.swp-rightNo {/*最右边样式*/
 transition: all .3s ease;
 left: 150%;
}
.swp-leftNo {/*最左边样式*/
 transition: all .3s ease;
 left: -150%;
}

Page({
 data:{
  swiperList: [{//除了1，2之外，其它的swpClass都是swp-rightNo
   aurl:\"../start/start\",
   swpClass:\"swp-center\",
   time:\"2018年3月下11\",
   bname:\"2018全球十大突破技术11\",
   imgsrc:\"../../public/img/swiper.png\"
  }, {
   aurl:\"#\",
   swpClass:\"swp-right\",
   time: \"2018年3月下22\",
   bname: \"2018全球十大突破技术22\",
    imgsrc: \"../../public/img/swiper2.png\"
 }, {
  aurl:\"#\",
  swpClass:\"swp-rightNo\",
  time: \"2018年3月下33\",
  bname: \"2018全球十大突破技术33\",
  imgsrc: \"../../public/img/swiper3.png\"
 }]
  },
  swpBtn:function(e){
  var swp = this.data.swiperList;
  var max=swp.length;
  var idx=e.currentTarget.dataset.index;
  var prev = swp[idx-1];//前一个
  var next = swp[idx+1];//后一个
  var curView=swp[idx];//当前
  if (curView.swpClass ===\'swp-center\'){//如果当前是在中间的，即可跳转
   wx.navigateTo({
    url: curView.aurl,
   })
  }
  if(prev){//如果当前的前面有
   if (next) {//当前的后面有
    next.swpClass = \"swp-right\";
   }
   prev.swpClass =\"swp-left\";
   curView.swpClass = \"swp-center\";
   for (var i =0; i < idx; i++) { //当前前一个的前面所有
    swp[i].swpClass = \'swp-leftNo\'
   }
  }
  if(next){//如果当前的后面有
   if(prev){//当前的前面有
    prev.swpClass = \"swp-left\";
   }
   curView.swpClass = \"swp-center\";
   next.swpClass = \"swp-right\";
   for (var i = (idx + 2); i < max; i++) {//当前后一个的后面所有
    swp[i].swpClass = \'swp-rightNo\'
   }
  }else{
   prev.swpClass = \"swp-left\";
   curView.swpClass = \"swp-center\";
  }
  this.setData({
   swiperList: swp
  })
 },
})