#小程序 分享一个有趣轮播图特效

因为最近在做一个智慧校园i小程序，写到学校概况页面，就想到这个动画，来分享一下

一、先上图：

 

不得不说，放上照片后既视感有点gaoxiao

一、代码部分：

<!-- wxml部分 -->

<swiper class="swiper-block" circular previous-margin="250rpx" next-margin="250rpx" current="0"
  bindchange="swiperChange">
  <block wx:for="{{imgUrls}}" wx:index="{{index}}">
    <swiper-item class="swiper-item">
      <image mode="aspectFill" src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}" />
      <view class="slide-detail {{swiperIndex == index ? 'active1' : ''}}">{{name[index]}}</view>
    </swiper-item>
  </block>
</swiper>

<!-- wxss部分 -->

.swiper-block {
  height: 400rpx;
  width: 100%;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: unset;
}

.slide-image {
  height: 200rpx;
  width: 150rpx;
  border-radius: 15rpx;
  box-shadow: 15px 15px 30rpx rgba(0, 0, 0, .2);
  margin: 0rpx 30rpx;
  z-index: 1;
}

.slide-detail {
  font-size: 22rpx;
}

  // js部分

data:{   
imgUrls: [
      'https://www.gdou.edu.cn/__local/5/B9/50/3E3114A_9F66.jpg',
      'https://www.gdou.edu.cn/__local/6/66/04/E3137A9F69D_78999847_AD72.jpg',
      'https://www.gdou.edu.cn/__local/C/58/5A/3113F84730D4_23C03E85_AEAD.jpg',
    ],
    name:[
      'XXX',
      'XXX',
      'XXX',
    ],
}