小程序-轮播图/旋转木马效果

实现效果（基于原生组件的实现）

实现代码：

wxml  轮播图部分

<swiper class="swiper" circular="true" indicator-dots="true"  indicator-color="#E6E6E6" previous-margin='70rpx' next-margin="70rpx"
        indicator-active-color="#FF6315" bindchange="bindchange">
        <swiper-item class="back center " wx:for='{{imgUrls}}' wx:for-index="index">
          <view class="wrap">
            <image class="back cradBg {{swiperIndex==index?'active':'quiet'}}" src='{{baseRes}}card-bg-2.png'></image>
            <view class="txtBox">
                <view class="flag" wx:if="{{swiperIndex==index?true:false}}">临时会员</view>
                <view class="brandLogo"><image  src="{{item.img}}"></image></view>
                <text class="plateNum">京A J234</text>
                <text class="color_ carType">宝马x1 2018时尚款</text>
                <text class="line" wx:if="{{swiperIndex==index?true:false}}"></text>
                <text class="carShop">哈尔滨运通俊晟一汽奥迪4S店</text>
                <text class="name cardNum color_">卡号：17600090009</text>
                <text class="name color_">德玛西亚</text>
            </view>
          </view>
        </swiper-item>
      </swiper>

　　js 轮播图部分

const app = getApp()
Page({
  data: {
    baseRes: app.globalData.baseRes,
    imgUrls: [],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    cardNum:2,
    swiperIndex:0
  },
  bindchange:function(e){
    this.setData({
      swiperIndex:e.detail.current
    })
  },

})

css

.swiper{
    height: 674rpx;
    margin-top: 74rpx;
}
.back{
   border-radius: 10rpx;
}
.center {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 600rpx!important;
   height: 544rpx!important;
   overflow: visible;
}
/* .wrap{ position: relative; margin: 0 10rpx; } */
.text, .html{
    position: absolute;
    right: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #fff;
}
.aplyCard{
  width: 520rpx;
  height: 90rpx;
  text-align: center;
  color: #fff;
  background: #FE691F;
  line-height: 90rpx;
  font-size: 32rpx;
  margin: 228rpx auto 80rpx;
  border-radius: 50rpx;
  box-shadow: 0 2rpx 10rpx #FF6315;
}
.noCard{
  display: flex;
  flex-direction: column;align-items: center;
}
.noCard image{
 width: 198rpx;
 height: 232rpx;
 margin: 124rpx 0 0;

}
.noCard view{
  margin: 150rpx 0 32rpx;width: 248rpx;height:70rpx;
  color: #fff;
  background: #FF6315;font-size: 28rpx;
  text-align: center;
  line-height: 70rpx;
  border-radius: 10rpx;
}
.noCard text{
 color: #909090;
 font-size:22rpx;  
}

swiper .wx-swiper-dots.wx-swiper-dots-horizontal{
  margin-bottom: 2rpx;
}
swiper .wx-swiper-dot{
  width:28rpx;
  display: inline-flex;
  height: 6rpx;
  margin-left: 10rpx;
  justify-content:space-between;
}
swiper .wx-swiper-dot::before{
  content: '';
  flex-grow: 1; 
  background: #E6E6E6;
  border-radius: 8rpx
}
swiper .wx-swiper-dot-active::before{
  background:#FA832D;   
}
swiper image.cradBg{transition: all .1s;box-shadow: 0 20rpx 50rpx rgba(255,127,43,.3); margin-top:20rpx;
}
swiper image.cradBg.active{
  width: 600rpx!important;
  height: 544rpx!important;
  }
swiper image.cradBg.quiet {
 height: 500rpx;
 width: 560rpx;
}
.brandLogo image{
  width: 60rpx;
  height: 60rpx;
  border-radius: 100%;
  margin-top: 19rpx;
}
.brandLogo{
 width: 100rpx;
  height: 100rpx;
  border-radius:100%; 
  background: rgba(255,255,255,0.8);
text-align: center;
}
.txtBox{
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  flex-direction: column;align-items: center;
  padding-top: 44rpx;
  box-sizing: border-box;
  color: #fff;
}
.flag{
  font-size: 16rpx;
  background: #fff;
  opacity: 0.6;
  color: #FDBC50 ;
  display: inline-block;
  position: absolute;
  right: 0;
  padding: 4rpx 14rpx; 
  top: 44rpx;
  border-radius: 20rpx 0 0 20rpx;
}
.plateNum{
  font-size: 30rpx;
  margin-top: 20rpx;
  letter-spacing: 1.6rpx;
}
.color_{
  opacity: 0.8
}
.line{
  height: 2rpx;
  width: 534rpx;
  background: rgba(255,255,255,.2);
  margin: 40rpx 0;
}
.carType{
  font-size: 22rpx;
}
.carShop{
  font-size: 30rpx;
}
.cardNum{
  margin: 22rpx 0 18rpx;
  display: block
}
.name{
  font-size: 24rpx;
}

View Code