微信小程序轮播图滚动带动背景图变换及滚动对应图片下标

	今天呢，应召需求需求呢，做了一个轮播图在滑动，后面背景图也会跟着滑动变换。

一开始呢，的确没啥思路，突然想着做了轮播图滑动并且有图片数量的显示变换的，突然脑子一灵光，就想到办法了想试试。
首先呢，先放图片吧


这个是实现的状态，由于懒得弄gif图，就将就看一下吧
首先是wxml代码

接着是wcss代码

.swiper-all{
  margin-top: 100rpx;
}

.all-img {
  margin-left: 5%;
  margin-right: 5%;
}


.carousel-img {
  width: 100%;
  height: 260rpx;
  margin-top: 26rpx;
  border-radius: 30rpx;
}

.img-class{
  width: 100%;
  margin-top: -340rpx;
}

.index-img{
  width: 100%;
  height: 430rpx;
}

最后才是js代码

data:{
imgUrl: [
      "/pages/img/dingzhi.png",
      "/pages/img/dingzhi2.png"
    ],
    indiicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    current: 0,
  },
  indexChange(e) {
    var that = this;
    that.setData({
      current: e.detail.current
    })
  },

现在是轮播图滚动，图片对应的下标也跟着变动

逻辑和上面的背景滚动一样

  
  //bindchange   bindtap意义不同哦   不懂的可以看下开发文档
    
      
        
      
    
  
  {{current+1}}/{{huZhuImage.length}}

.all-img {
  margin-left: 5%;
  margin-right: 5%;
}


.carousel-img {
  width: 100%;
  height: 260rpx;
  margin-top: 26rpx;
  border-radius: 30rpx;
}

data: {
huZhuImage: [
      "/pages/img/dingzhi.png",
      "/pages/img/dingzhi4.png"
    ],
    },
    自动触发时间
    swiperChange: function (e) {
    var that = this;
    that.setData({
      current: e.detail.current
    })
  }, 

这就是以上所有代码了，就能实现这个功能，有问题的可以留言哦。。。