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

  
    
      
      
        临时会员
        
          
        
        京A J234
        宝马x1 2018时尚款
        
        哈尔滨运通俊晟一汽奥迪4S店
        卡号：17600090009
        德玛西亚
      
    
  

.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;
}

jS

Page({
  data: {
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    cardNum:2,
    swiperIndex:0,
    carouselList:[{
      "id": "101",
      "img": "red"
  },
  {
      "id": "102",
      "img": "blue"
  },
  {
      "id": "103",
      "img": "green"
  }]
  },
  onLoad(){

  },

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