小程序实现层叠卡片滑动效果

/*轮播图片*/
.lunbo_center {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 padding: 50rpx 0;
 box-sizing: border-box;
}
.teachers_b {
 position: relative;
}
#slide {
 margin: 0 auto;
 width: 100%;
 height: 160px;
 position: relative;
}
#slide li {
 position: absolute;
 width: 600rpx;
 height: 300rpx;
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 align-items: flex-start;
 -webkit-box-align: flex-start;
 -webkit-align-items: flex-start;
 background: #fff;
 overflow: hidden;
 box-shadow: 0 0 20px #1d374d;
}
#slide li image {
 width: 100%;
 height: 100%;
}
.slide_left {
 width: 240px;
}
.slide_right {
 padding: 40px;
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 flex: 1;
 min-width: 0;
}
.slide_right h3 {
 font: 400 30px/18px "Microsoft Yahei";
 color: #222;
}
.slide_right h3 span {
 display: inline-block;
 margin-left: 10px;
 font: 400 14px/36px "Microsoft Yahei";
 color: #555;
}
.slide_right p {
 padding: 20px 0 30px;
 color: #555;
 font: 400 14px/24px "Microsoft Yahei";
 border-bottom: 1px solid #dbdbdb;
}
.slide_right dl {
 padding-top: 30px;
}
.slide_right dd {
 /* float: left; */
 width: 33.3%;
 color: #777;
 font: 400 12px/24px "Microsoft Yahei";
}
.slide_right dd h3 {
 color: #ff9000;
 margin-bottom: 20px;
}
.arrow {
 display: none;
}
.arrow .prev, .arrow .next {
 position: absolute;
 width: 64px;
 top: 38%;
 z-index: 9;
 font: 700 96px 'simsun';
 opacity: 0.3;
 color: #fff;
 cursor: pointer;
}
.arrow .prev {
 left: -220px;
}
.arrow .next {
 right: -220px;
}
.arrow .prev:hover, .arrow .next:hover {
 color: #00a0e9;
 opacity: 0.7;
}

// js代码
Page({
 /**
  * 页面的初始数据
  */
 data: {
  startX: 0,
  endX: 0,
  iCenter: 3,
  datas: [{
   id: 1,
   zIndex: 2,
   opacity: 0.2,
   left: 10,
   iamge: "../../icon/lunbo2.jpg",
   animation: null
  },
  {
   id: 2,
   zIndex: 4,
   opacity: 0.4,
   left: 20,
   iamge: "../../icon/lunbo3.jpg",
   animation: null
  },
  {
   id: 3,
   zIndex: 6,
   opacity: 0.6,
   left: 30,
   iamge: "../../icon/lunbo4.jpg",
   animation: null
  },
  {
   id: 4,
   zIndex: 8,
   opacity: 1,
   left: 40,
   iamge: "../../icon/lunbo1.jpg",
   animation: null
  },
  {
   id: 5,
   zIndex: 6,
   opacity: 0.6,
   left: 50,
   iamge: "../../icon/lunbo2.jpg",
   animation: null
  },
  {
   id: 6,
   zIndex: 4,
   opacity: 0.4,
   left: 60,
   iamge: "../../icon/lunbo3.jpg",
   animation: null
  } ,
  {
   id: 7,
   zIndex: 2,
   opacity: 0.2,
   left: 70,
   iamge: "../../icon/lunbo1.jpg",
   animation: null
  }
  ],
  order: []
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  this.__set__();
  this.move();
 },
 move: function () {
  var datas = this.data.datas;
  /*图片分布*/
  for (var i = 0; i  that.data.iCenter) {
   for (var i = 0; i  20) {
   this.left();
  }
  if (moveX <-20) {
   this.right();
  }
 },
})