微信小程序自制轮播图（仿京粉轮播）

效果图如下所示

.wxml

<view class="index">
  <view class="center curr{{curr > index?((curr - index) > 1?2:1):(index - curr) > 2?1:index - curr}}" 
  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:'1111111111111111111111111111111111'},
      { img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=225193914,751284870&fm=26&gp=0.jpg', name:'222222222222222222222222222222'},
      { img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3019995954,636527762&fm=26&gp=0.jpg', name:'3333333333333333333333333333333'},
      { img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201707%2F13%2F20170713140843_KrwNF.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642297008&t=55ea63589d129189d7971f4e7ebf99ed', name:'44444444444444444444444444444'},
    ],
    curr:0,
    towards:'',
    interval:''
  },
  onShow:function(e){
    let that = this
    that.data.interval = setInterval(function () {
      that.calation(1)
    },3000)
  },
  calation(type){
    var that = this
    if(type == 1){
      that.setData({
        curr: (that.data.curr + 1) >= that.data.detail.length?0:(that.data.curr + 1)
      })
    }else{
      that.setData({
        curr: (that.data.curr - 1) < 0?that.data.detail.length - 1:(that.data.curr - 1)
      })
    }
  },
  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) {//向右
        that.calation(2)
      } else if (that.data.towards > 0) {//向左
        that.calation(1)
      }
      that.onShow();
    }
  },
})

有什么问题欢迎评论留言，我会及时回复你的