微信小程式自制輪播圖（仿京粉輪播）

效果圖如下所示

.wxml

<view class="index">
  <view class="center curr{{curr[index]}}" wx:for="{{detail}}" wx:key="index"   bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend="touchEnd">
    <view class="center-image">
    <image src="{{item.img}}"></image>
    </view>
    <view class="center-ney">
      <view>{{item.name}}</view>
    </view>
  </view>
</view>
           

.wxss

page{
  background-color: #f7f7f7;
}
view,image{
  box-sizing:border-box;
}
.index{
  width: 100%;
  float: left;
  overflow: hidden;
  padding: 3%;
  background-color: #e54d42;
  position: relative;
}
.center{
  float: left;
  overflow: hidden;
  background-color: #fff;
  padding: 3%;
  border-radius: 10rpx;
  transition: all 0.5s;
}
.center-image{
  width: 30%;
  height: 100%;
  float: left;
}
.center-image>image{
  width: 100%;
  height: 100%;
}
.center-ney{
  width: 70%;
  height: 100%;
  float: left;
  padding: 0 0 0 3%;
  font-size: 24rpx;
}
.center-ney>view{
  width: 100%;
  float: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.curr2{
  width: 94%;
  height: 160rpx;
  margin: 20rpx 0;
  position: absolute;
  left: 3%;
  z-index: 1;
  opacity: 0.8;
}
.curr1{
  width: 91%;
  height: 180rpx;
  margin: 10rpx 0;
  position: absolute;
  left: 3%;
  z-index: 2;
  opacity: 0.9;
}
.curr0{
  width: 94%;
  height: 200rpx;
  position: relative;
  left: 0;
  z-index: 3;
}
           

.js

Page({
  data: {
    detail:[
      { img: 'http://img3.imgtn.bdimg.com/it/u=1960330002,2943700579&fm=26&gp=0.jpg', name:'測試内容1測試内容1測試内容1測試内容1測試内容1'},
      { img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=225193914,751284870&fm=26&gp=0.jpg', name:'測試内容2測試内容2測試内容2測試内容2測試内容2'},
      { img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3019995954,636527762&fm=26&gp=0.jpg', name:'測試内容3測試内容3測試内容3測試内容3測試内容3'}
    ],
    curr: [0, 1, 2],
    towards:'',
    interval:''
  },
  onShow:function(e){
    let that = this
    that.data.interval = setInterval(function () {
      if (that.data.curr[0] == 0){
        that.data.curr = [2,0,1]
      } else if (that.data.curr[1] == 0){
        that.data.curr = [1,2,0]
      } else if (that.data.curr[2] == 0){
        that.data.curr = [0,1,2]
      }
      that.setData({
        curr: that.data.curr
      })
    },3000)
  },
  onHide: function () {
    clearInterval(this.data.interval)
  },
  onTabItemTap:function(){
    clearInterval(this.data.interval)
  },
  touchStart: function (e) {
    if (e.touches.length == 1) {
      this.setData({
        startX: e.touches[0].clientX
      });
    }
  },
  touchMove: function (e) {
    if (e.touches.length == 1) {
      var moveX = e.touches[0].clientX;
      var towards = this.data.startX - moveX;
      this.setData({
        towards: towards
      })
    }
  },
  touchEnd:function(e){
    let that = this
    if (that.data.towards != ''){
      clearInterval(that.data.interval)
      if (that.data.towards < 0) {//向右
        if (that.data.curr[0] == 0) {
          that.data.curr = [1, 2, 0]
        } else if (that.data.curr[1] == 0) {
          that.data.curr = [0, 1, 2]
        } else if (that.data.curr[2] == 0) {
          that.data.curr = [2, 0, 1]
        }
      } else if (that.data.towards > 0) {//向左
        if (that.data.curr[0] == 0) {
          that.data.curr = [2, 0, 1]
        } else if (that.data.curr[1] == 0) {
          that.data.curr = [1, 2, 0]
        } else if (that.data.curr[2] == 0) {
          that.data.curr = [0, 1, 2]
        }
      }
      that.setData({
        curr: that.data.curr,
      })
      that.onShow();
    }
    that.setData({
      towards:''
    })
  },
})
           

有什麼問題歡迎評論留言，我會及時回複你的