小程序卡片轮播效果

如图上效果：

实现代码如下：

index.wxml

<view class="container">
  <swiper class="imageContainer" bindchange="handleChange" previous-margin="50rpx" next-margin="50rpx" circular autoplay>
    <block wx:for="{{3}}" wx:key="{{index}}">
      <swiper-item class="item">
        <image class="itemImg {{currentIndex == index ? 'active': ''}}" src="http://img1.imgtn.bdimg.com/it/u=2591172620,1260383735&fm=26&gp=0.jpg"></image>
      </swiper-item>
    </block>
  </swiper>

  <view style="height:50rpx"></view>

  <swiper indicator-dots class="swiperContainer" bindchange="swiperChange" previous-margin="30rpx" next-margin="30rpx" autoplay="{{false}}">
    <block wx:for="{{3}}" wx:key="{{index}}">
      <swiper-item class="swiperitem">
        <image class="swiperItemImgs {{swiperIndex==index?'swiperitemImg'+swiperIndex:''}}" src="http://img1.imgtn.bdimg.com/it/u=2591172620,1260383735&fm=26&gp=0.jpg"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

index.wxss

page{
  background: #f1f1f1;
}
.imageContainer{
  width: 100%;
  height: 500rpx;
  background: #000;
}
.item{
  height: 500rpx;
}
.itemImg{
  position: absolute;
  width: 100%;
  height: 380rpx;
  border-radius: 15rpx;
  z-index: 5;
  opacity: 0.7;
  top: 13%;
}
.active{
  opacity: 1;
  z-index: 10;
  height: 430rpx;
  top: 7%;
  transition:all .2s ease-in 0s;
}

.swiperContainer{
  width: 100%;
  min-height: 502rpx;
}
.swiperitem{
  height: 460rpx;
}
.swiperItemImgs{
  position: absolute;
  width: 100%;
  height: 460rpx;
  box-sizing: border-box;
}
.swiperitemImg0{
  padding-right: 30rpx;
}
.swiperitemImg1{
  padding: 0 30rpx;
}
.swiperitemImg2{
  padding-left: 30rpx;
}

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex: 0,
    swiperIndex: 0
  },
  /* 这里实现控制中间凸显图片的样式 */
  handleChange: function (e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },
  swiperChange: function (e) {
    this.setData({
      swiperIndex: e.detail.current
    })
  },
  /**生命周期函数--监听页面加载*/
  onLoad: function (options) {

  }
})