小程序实现广告轮播图

index.wxml

<view>
  <view class="lb_swiper">
    <swiper style='height:{{Hei}};position:relative' indicator-dots="true" circular="true"
     current="{{bannerCurrent}}" bindchange="bannerChange"
      autoplay="true" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{background}}" wx:key="*this">
        <swiper-item>
          <image mode="widthFix" bindload='imgH' src="{{item.url}}" class="slide-image {{bannerCurrent==index?'slide-active':''}}" style="transition: all 1s"></image>
          <view style="position:absolute;bottom:94rpx;left:30rpx;width:100%">
            <text style="color:white">{{item.title}}</text>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
</view>

index.wxss

.lb_swiper{
  width: 80%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  padding: 5%;
}


.lb_swiper .wx-swiper-dot{
  width: 8rpx;
  height: 8rpx;
  border-radius:3rpx;
  background: #ccc;
}
.lb_swiper .wx-swiper-dot-active{
  width: 26rpx;
  border-radius:10rpx;
  background: rgba(236, 28, 28, 0.801);
}

 
.slide-image{
  width:100%;
  height:100%;
  transform: scale(0.6,0.6);
  border-radius:10rpx;
  overflow: hidden;
}
.slide-active{
  transform: scale(1,1);
}

index.js

Page({

  data: {
    background: [{title:'图一',url:'/images/flash1.jpg'}, 
    {title:'图二',url:'/images/flash2.jpg'}, 
    {title:'图三',url:'/images/flash3.jpg'}],
    vertical: false,
    interval: 2000,
    duration: 500,
    bannerCurrent: 0,
    Hei:""    
  },
  
//轮播current切换监听事件
bannerChange: function(e){
  console.log("监听轮播事件",e);
  this.setData({
    bannerCurrent: e.detail.current
  })
},


  imgH:function(e){
    var winWid = wx.getSystemInfoSync().windowWidth;         //获取当前屏幕的宽度
    var imgh=e.detail.height;　　　　　　　　　　　　　　　　//图片高度
    var imgw=e.detail.width;
    var swiperH=winWid*imgh/imgw + "px"　　　　　　　　　　//等比设置swiper的高度。  即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度    ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
    this.setData({
        Hei:swiperH　　　　　　　　//设置高度
    })
},

  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },

  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

来源：

https://xunming.blog.csdn.net/article/details/114106215

https://blog.csdn.net/PlasticsShaT/article/details/119896210

https://gitcode.csdn.net/65eed85f1a836825ed79fbc3.html