小程序不定数量左右滑动中间放大轮播图效果

具体的样式效果(根据后台传递参数更改展示数量)

HTML代码

<!-- 秒拼产品模块 备选样式1-->
	<view style="white-space: nowrap;" class="seceGroupBtn" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"  wx:if="{{mpThing[0]}}">
		<view class="seceGroupBtn_in_box seceGroupBtn_in_box1" data-goodsId="{{mpThing[mpThing.length-1].goods_id}}" wx:if="{{yFlage&&mpThing.length>2}}" data-id="{{mpThing.length-1}}" bindtap="navSeceGroup">
			<view class="imageBox_t">
				<image src="{{mpThing[mpThing.length-1].goods_img}}" mode="widthFix"></image>
			</view>
			<view class="titleNameBox">
				<view class="titleNameBox_l">秒拼</view>
				<view class="titleNameBox_r">{{mpThing[mpThing.length-1].goods_name}}</view>
			</view>
			<view class="priceBox">
				<view class="priceBox_l">
					<text class="fontFh">￥</text>{{mpThing[mpThing.length-1].goods_price}}
				</view>
				<view class="priceBox_r">
					<text>已售{{mpThing[mpThing.length-1].sales}}</text>
				</view>
			</view>
		</view>

	    <view class="seceGroupBtn_in_box {{indexSeceGroupSty[index]}} {{opacitySty[index]}} {{indexUn[index]}}"  wx:for="{{mpThing}}" data-id="{{index+1}}" data-goodsId="{{item.goods_id}}" style="margin-left: 0rpx;" bindtap="navSeceGroup">
			<view class="imageBox_t">
				<image src="{{item.goods_img}}" mode="widthFix"></image>
			</view>
			<view class="titleNameBox">
				<view class="titleNameBox_l">秒拼</view>
				<view class="titleNameBox_r">{{item.goods_name}}</view>
			</view>
			<view class="priceBox">
				<view class="priceBox_l">
					<text class="fontFh">￥</text>{{item.goods_price}}
				</view>
				<view class="priceBox_r">
					<text>已售{{item.sales}}</text>
				</view>
			</view>
	    </view>
		
		<view wx:if="{{zFlage&&mpThing.length>2}}" data-goodsId="{{mpThing[0].goods_id}}" class="seceGroupBtn_in_box seceGroupBtn_in_box3" data-id="0" bindtap="navSeceGroup">
			<view class="imageBox_t">
				<image src="{{mpThing[0].goods_img}}" mode="widthFix"></image>
			</view>
			<view class="titleNameBox">
				<view class="titleNameBox_l">秒拼</view>
				<view class="titleNameBox_r">{{mpThing[0].goods_name}}</view>
			</view>
			<view class="priceBox">
				<view class="priceBox_l">
					<text class="fontFh">￥</text>{{mpThing[0].goods_price}}
				</view>
				<view class="priceBox_r">
					<text>已售{{mpThing[0].sales}}</text>
				</view>
			</view>
		</view>
  	</view>
  	<!-- 触控点模块 -->
  	<view class="pointingStick_box" wx:if="{{mpThing[0]}}">
		<view class="contentButtonBox">
			<view class="contentButtonBox_in_box {{buttonFlag[index]}}" wx:for="{{buttonFlag}}" data-id="{{index}}" bindtap="touchRadus"></view>
		</view>
  	</view>

　　无限轮播的原理,前面后面各自设置一个起始结束的模块

touchRadus:function(e){
    var that = this;
    var unionid = wx.getStorageSync('thisCode');
    let indexSeceGroupSty = that.data.indexSeceGroupSty;
    // 定义可执行参数
    let seceGroupArr = that.data.mpThing;
    // 定义透明值
    let opacitySty = that.data.opacitySty;
    let nowAdress = e.target.dataset.id;
    let buttonFlag = that.data.buttonFlag;
    // 触控点控制
    for(let j=0;j<seceGroupArr.length;j++){
      buttonFlag[j] = "";
    }
    if(nowAdress >= seceGroupArr.length){
      nowAdress = 0; 
    }
    if(nowAdress<=0){
      that.setData({
         yFlage:true,
         zFlage:false,
      })
    }else if(nowAdress==seceGroupArr.length-1){
      that.setData({
         yFlage:false,
         zFlage:true,
      })
    }else{
      that.setData({
         yFlage:false,
         zFlage:false,
      })
    }
    buttonFlag[nowAdress] = "contentButtonBox_in_box_hover";
    this.data.done = true;
    for(let j=nowAdress;j<seceGroupArr.length;j++){
      indexSeceGroupSty[j] = "seceGroupBtn_in_box3";
    }
    for(let b=0;b<nowAdress;b++){
      indexSeceGroupSty[b] = "seceGroupBtn_in_box1";
    }
    indexSeceGroupSty[nowAdress] = "seceGroupBtn_in_box2";
    // 没有轮到的隐藏
    
    if(nowAdress<=0){
      for(let j=0;j<seceGroupArr.length;j++){
        opacitySty[j] = "opacitySty";
      }
      opacitySty[nowAdress] = "";
      opacitySty[nowAdress+1] = "";

      }else if(nowAdress >= seceGroupArr.length){
        for(let j=0;j<seceGroupArr.length;j++){
          opacitySty[j] = "opacitySty";
        }
        opacitySty[seceGroupArr.length-1] = "";
        opacitySty[seceGroupArr.length-2] = "";

      }else{
        for(let j=0;j<seceGroupArr.length;j++){
          opacitySty[j] = "opacitySty";
        }
        opacitySty[nowAdress+1] = "";
        opacitySty[nowAdress] = "";
        opacitySty[nowAdress-1] = "";
    }
    that.setData({
      indexSeceGroupSty:indexSeceGroupSty,
      nowAdress:nowAdress,
      opacitySty:opacitySty,
      buttonFlag:buttonFlag
    })
  },

　　点击下方触摸圆圈让相应的模块放到中间

//触摸开始事件
  touchstart: function(e) {
    this.data.touchDot = e.touches[0].pageX;
    var that = this;
  },
  //触摸移动事件
  touchmove: function(e) {
    var unionid = wx.getStorageSync('thisCode');
    var that = this;
    let touchMove = e.touches[0].pageX;
    let touchDot = this.data.touchDot;
    let time = this.data.time;
    let indexSeceGroupSty = that.data.indexSeceGroupSty;
    // 定义可执行参数
    let seceGroupArr = that.data.mpThing;
    // 定义透明值
    let opacitySty = that.data.opacitySty;
    // 定义层级
    let indexUn = that.data.indexUn;
    //向左滑动
    if(touchMove - touchDot <= -40 && !this.data.done) {
      let nowAdress = that.data.nowAdress;
      let buttonFlag = that.data.buttonFlag;
      // 触控点控制
      for(let j=0;j<seceGroupArr.length;j++){
        buttonFlag[j] = "";
      }
      nowAdress++;
      if(nowAdress >= seceGroupArr.length){
        nowAdress = 0;
        for(let j=0;j<seceGroupArr.length;j++){
          indexSeceGroupSty[j] = "seceGroupBtn_in_box3";
        }
        that.setData({
          indexSeceGroupSty:indexSeceGroupSty,
        })
      }else{
      }
      if(nowAdress<=0){
        that.setData({
           yFlage:true,
           zFlage:false,
        })
      }else if(nowAdress==seceGroupArr.length-1){
        that.setData({
           yFlage:false,
           zFlage:true,
        })
      }else{
        that.setData({
           yFlage:false,
           zFlage:false,
        })
      }
      buttonFlag[nowAdress] = "contentButtonBox_in_box_hover";
      this.data.done = true;
      for(let j=nowAdress;j<seceGroupArr.length;j++){
        indexSeceGroupSty[j] = "seceGroupBtn_in_box3";
      }
      for(let b=0;b<nowAdress;b++){
        indexSeceGroupSty[b] = "seceGroupBtn_in_box1";
      }
      indexSeceGroupSty[nowAdress] = "seceGroupBtn_in_box2";
      // 没有轮到的隐藏
      
      if(nowAdress<=0){
        for(let j=0;j<seceGroupArr.length;j++){
          opacitySty[j] = "opacitySty";
          indexUn[j] = ""
        }
        opacitySty[nowAdress] = "";
        opacitySty[nowAdress+1] = "";
        indexUn[nowAdress+1] = "indexUn";

        }else if(nowAdress >= seceGroupArr.length){
          for(let j=0;j<seceGroupArr.length;j++){
            opacitySty[j] = "opacitySty";
            indexUn[j] = ""
          }
          opacitySty[seceGroupArr.length-1] = "";
          opacitySty[seceGroupArr.length-2] = "";
          indexUn[seceGroupArr.length-2] = "indexUn";
        }else{
          for(let j=0;j<seceGroupArr.length;j++){
            opacitySty[j] = "opacitySty";
          }
          opacitySty[nowAdress+1] = "";
          opacitySty[nowAdress] = "";
          opacitySty[nowAdress-1] = "";
          indexUn[nowAdress+1] = "indexUn";
      }
      that.setData({
        indexSeceGroupSty:indexSeceGroupSty,
        nowAdress:nowAdress,
        opacitySty:opacitySty,
        buttonFlag:buttonFlag,
        indexUn:indexUn
      })
    }
    //向右滑动
    if (touchMove - touchDot >= 40 && !this.data.done) {
      let nowAdress = that.data.nowAdress;
      let buttonFlag = that.data.buttonFlag;
      this.data.done = true;
      nowAdress--;
      if(nowAdress<0){
        nowAdress = seceGroupArr.length-1;
        for(let j=0;j<seceGroupArr.length;j++){
          indexSeceGroupSty[j] = "seceGroupBtn_in_box1";
        }
        that.setData({
          indexSeceGroupSty:indexSeceGroupSty,
        })
      }else{

      }

      if(nowAdress<=0){
        that.setData({
           yFlage:true,
           zFlage:false,
        })
      }else if(nowAdress==seceGroupArr.length-1){
        that.setData({
           yFlage:false,
           zFlage:true,
        })
      }else{
        that.setData({
           yFlage:false,
           zFlage:false,
        })
      }
      for(let j=0;j<seceGroupArr.length;j++){
        buttonFlag[j] = "";
      }
      buttonFlag[nowAdress] = "contentButtonBox_in_box_hover";
      this.data.done = true;
      for(let j=0;nowAdress>j;j++){
        indexSeceGroupSty[j] = "seceGroupBtn_in_box1";
      }
      for(let b=seceGroupArr.length;b>nowAdress;b--){
        indexSeceGroupSty[b] = "seceGroupBtn_in_box3";
      }
      indexSeceGroupSty[nowAdress] = "seceGroupBtn_in_box2";
      // 没有轮到的隐藏
      if(nowAdress<=0){
        for(let j=0;j<seceGroupArr.length;j++){
          opacitySty[j] = "opacitySty";
        }
        opacitySty[nowAdress] = "";
        opacitySty[nowAdress+1] = "";

        }else if(nowAdress >= seceGroupArr.length){
          for(let j=0;j<seceGroupArr.length;j++){
            opacitySty[j] = "opacitySty";
          }
          opacitySty[seceGroupArr.length-1] = "";
          opacitySty[seceGroupArr.length-2] = "";

        }else{
          for(let j=0;j<seceGroupArr.length;j++){
            opacitySty[j] = "opacitySty";
          }
          opacitySty[nowAdress+1] = "";
          opacitySty[nowAdress] = "";
          opacitySty[nowAdress-1] = "";
      }
      
      this.setData({
        indexSeceGroupSty:indexSeceGroupSty,
        nowAdress:nowAdress,
        opacitySty:opacitySty,
        buttonFlag:buttonFlag
      })
    }
  },
//触摸结束事件
  touchend: function(e) {
    clearInterval(this.data.interval);
    this.data.time = 0;
    this.data.done = false;
  },

　　左右滑动的代码

/*触控点样式*/
.pointingStick_box{
    background: #fff;
    width: 100%;
    padding: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pointingStick_box .contentButtonBox{
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.pointingStick_box .contentButtonBox .contentButtonBox_in_box{
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    border: 2rpx #666 solid;
    margin-right: 8rpx;
    background: #fff;
}
.pointingStick_box .contentButtonBox .contentButtonBox_in_box_hover{
    background: #f8b23a;
}
/*主题样式*/
/*秒拼产品模块*/
.seceGroupBtn{
    width: 100%;
    height: 400rpx;
    position: relative;
    background: #fff;
}
.seceGroupBtn .seceGroupBtn_in_box{
    width: 200rpx;
    height: 280rpx;
    position: absolute;
    top: 55rpx;
    opacity: 1;
    z-index: 1;
    padding: 10rpx;
    box-shadow: 0rpx 0rpx 5rpx #999;
    background: #fff;
}
.seceGroupBtn .seceGroupBtn_in_box1{
    display: block;
    left: 10rpx;
    opacity: 1;
    z-index: 1;
    animation: mymoveL1 .2s ease;
}
.seceGroupBtn .seceGroupBtn_in_box2{
    display: block;
    left: 53%;
    transform: scale(1.2) translateX(-50%);
    opacity: 1;
    z-index: 3;
}
.seceGroupBtn .seceGroupBtn_in_box3{
    display: block;
    right: 10rpx;
    opacity: 1;
    z-index: 1
}
.seceGroupBtn  .opacitySty{
    /*display: none;*/
    opacity: 0 !important;
    display: none !important;
}
.pointingStick_box{
    background: #fff;
    width: 100%;
    padding: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pointingStick_box .contentButtonBox{
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.pointingStick_box .contentButtonBox .contentButtonBox_in_box{
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    border: 2rpx #666 solid;
    margin-right: 8rpx;
    background: #fff;
}
.pointingStick_box .contentButtonBox .contentButtonBox_in_box_hover{
    background: #f8b23a;
}
.seceGroupBtn_in_box .imageBox_t{
    width: 100%;
    height: 200rpx;
    overflow: hidden;
}
.seceGroupBtn_in_box .imageBox_t image{
    width: 100%;
}
.seceGroupBtn_in_box .titleNameBox{
    height: 50rpx;
    display: flex;
    align-items: center;
}
.seceGroupBtn_in_box .titleNameBox .titleNameBox_l{
    background: #d13d4b;
    color: #fff;
    font-size: 18rpx;
    padding: 3rpx 6rpx;
    margin-right: 3rpx;
    border-radius: 5rpx;
    text-align: center;
}
.seceGroupBtn_in_box .titleNameBox .titleNameBox_r{
    font-size: 22rpx;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.seceGroupBtn_in_box .priceBox{
    width: 100%;
    height: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.seceGroupBtn_in_box .priceBox .priceBox_l{
    color: #d13d4b;
    font-size: 22rpx;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width: 70%;
}
.seceGroupBtn_in_box .priceBox .fontFh{
    font-size: 20rpx;
}
.seceGroupBtn_in_box .priceBox .priceBox_r{
    font-size: 20rpx;
    color: #666;
}
.indexUn{
    z-index: -2;
}