微信小程序 轮播图

1. 轮播图

 <!-- 
    原图的宽度和高度  1125 * 352 px
    swiper 宽度 / swiper  高度 =  原图的宽度  /  原图的高度
    swiper  高度  =  swiper 宽度 *  原图的高度 / 原图的宽度
    height: 750rpx * 352 /  1125 

    widthFix ： 宽度指定了之后 高度 会自己按比例来调整
      5 autoplay 自动轮播
      6 interval 修改轮播时间
      7 circular 衔接轮播
      8 indicator-dots 显示 指示器 分页器 索引器 
      9 indicator-color 指示器的未选择的颜色 
      10 indicator-active-color 选中的时候的指示器的颜色 
  -->


<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> </swiper-item>
</swiper>                                                                     

swiper {
  width: 100%;
  height: calc(750rpx * 352 /  1125); 
}
image {
  width: 100%;
}