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

// index/gun/jsSwiper2/jsSwiper2.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
 startX: 0,
 endX: 0,
 iCenter: 3,
 datas: [{
  id: 1,
  zIndex: 2,
  opacity: 0.2,
  left: 40,
  iamge: "../../images/1.jpg",
  animation: null
 },
 {
  id: 2,
  zIndex: 4,
  opacity: 0.4,
  left: 80,
  iamge: "../../images/2.jpg",
  animation: null
 },
 {
  id: 3,
  zIndex: 6,
  opacity: 0.6,
  left: 120,
  iamge: "../../images/3.jpg",
  animation: null
 },
 {
  id: 4,
  zIndex: 8,
  opacity: 1,
  left: 160,
  iamge: "../../images/4.jpg",
  animation: null
 },
 {
  id: 5,
  zIndex: 6,
  opacity: 0.6,
  left: 200,
  iamge: "../../images/5.jpg",
  animation: null
 },
 {
  id: 6,
  zIndex: 4,
  opacity: 0.4,
  left: 240,
  iamge: "../../images/6.jpg",
  animation: null
 },
 {
  id: 7,
  zIndex: 2,
  opacity: 0.2,
  left: 280,
  iamge: "../../images/7.jpg",
  animation: null
 },
 ],
 order: []
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 this.__set__();
 this.move();
 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {

 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 },
 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();
 }
 },
})

.teachers_banner {
 width: 100%;
 height: 650px;
 background-size: cover;
 position: relative;
 overflow: hidden;
}

.teachers_b {
 position: relative;
 margin-top: 80px;
}

#slide {
 margin: 0 auto;
 width: 100%;
 height: 350px;
 position: relative;
}

image {
 width: 400rpx;
 height: 550rpx;
}

#slide li {
 position: absolute;
 width: 400rpx;
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 align-items: flex-start;
 -webkit-box-align: flex-start;
 -webkit-align-items: flex-start;
 overflow: hidden;
 box-shadow: 0 0 20px #1d374d;
}

#slide li img {
 width: 100%;
 height: 100%;
}

.slide_right {
 padding: 40px;
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 flex: 1;
 min-width: 0;
}

.slide_right dl {
 padding-top: 10px;
}

.arrow .prev, .arrow .next {
 position: absolute;
 width: 50px;
 top: 38%;
 z-index: 9;
 font: 700 96px 'simsun';
 opacity: 0.3;
 color: #fff;
 cursor: pointer;
}