微信小程序3D炫彩轮播图

先看下一下效果图：

---

不多BB，直接上代码：

---

js部分：

function getRandomColor() {
  const rgb = []
  for (let i = 0; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + rgb.join('')
}

Page({

  data: {
    currentIndex: 0
  },

  onLoad: function (options) {

  },
  /* 这里实现控制中间凸显图片的样式 */
  handleChange: function (e) {
    this.setData({
      currentIndex: e.detail.current,
      bgColor: getRandomColor()
    })
  },
})

 wxml部分：

<swiper class="imageContainer" bindchange="handleChange" previous-margin="50rpx" next-margin="50rpx" circular autoplay>
  <block wx:for="{{3}}" wx:key="{{index}}">
    <swiper-item class="item">
      <view class="itemImg {{currentIndex == index ? ' active ': ' '}}" style='background: {{bgColor}};'></view>
    </swiper-item>
  </block>
</swiper>

<view class='layout'><text style='color:{{bgColor}}'>这是一个寂寞的天，下着有些伤心的雨</text></view>

wxss部分：

page {
  background: #f7f7f7f7;
}

.imageContainer {
  width: 100%;
  height: 500rpx;
  background: #000;
  counter-reset: wangxiaoer;
}

.item {
  height: 500rpx;
}

.itemImg:before {
  content: counters(wangxiaoer, '') '. ';
  counter-increment: wangxiaoer;
  position: relative;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  margin: 0 auto;
  text-align: center;
}

.itemImg {
  position: absolute;
  width: 100%;
  height: 380rpx;
  border-radius: 15rpx;
  z-index: 5;
  opacity: 0.7;
  top: 13%;
  background-color: #f00;
}

.active {
  opacity: 1;
  z-index: 10;
  height: 430rpx;
  top: 7%;
  transition: all 0.2s ease-in 0s;
  background-color: #ccc;
}

.layout {
  width: 750rpx;
  height: 200rpx;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

text {
  font-weight: 700;
}

 本文适合对小程序开发有一定的基础的人，小白可先看一下小程序文档中的swiper组件（https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html）。