微信小程序 旋转木马/缩放轮播图 功能

<swiper class='swiperClass' autoplay indicator-color="#a39f99" indicator-active-color="#f49641" indicator-dots  interval="2000" duration="1000" previous-margin="30px" next-margin="30px" circular bindchange="bindchange" style='height: {{swiperHeight}}px'>
    <block wx:for="{{imgUrls}}" wx:key="{{index}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : 'quiet'}}" mode='aspectFill'>
        </image>
      </swiper-item>
    </block>
  </swiper>

//.wxss
.swiperClass {
  margin: 0;
  margin-top: 10px;
}

.slide-image {
  width: 100%;
  height: 90%;
  border-radius: 10px;
  position: relative;
}

image.active {
  transform: none;
  transition: all 0.2s ease-in 0s;
}  

image.quiet {
  transform: scale(0.8333333);
  transition: all 0.2s ease-in 0s;
}

//.js
data: {
    imgUrls: [
      'xxx',
      'xxx',
      'xxx',
      'xxx'
    ],
    swiperIndex: 0 //这里不写第一次启动展示的时候会有问题
  },

bindchange(e) {
    this.setData({
      swiperIndex: e.detail.current
    })
  },