小程序 旋转木马_基于原生的小程序轮播图-旋转木马效果

旋转木马效果

wxml代码

        这里内容布局{{index+1}}      

js代码

const app = getApp()Page({  data: {    baseRes: app.globalData.baseRes,    imgUrls: ["https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2796939370,1206402153&fm=26&gp=0.jpg", "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3044936332,3482263290&fm=15&gp=0.jpg", "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3914974861,2067249766&fm=26&gp=0.jpg", "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2546781936,2858567599&fm=26&gp=0.jpg"],    indicatorDots: true,    autoplay: true,    interval: 5000,    duration: 1000,    cardNum: 2,    swiperIndex: 0  },  bindchange: function(e) {    this.setData({      swiperIndex: e.detail.current    })  },})

wxss代码

.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 0.1s;  box-shadow: 0 20rpx 50rpx rgba(219, 218, 219, 0.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;}.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, 0.2);  margin: 40rpx 0;}.carType {  font-size: 22rpx;}.carShop {  font-size: 30rpx;}.cardNum {  margin: 22rpx 0 18rpx;  display: block;}.name {  font-size: 24rpx;}