微信小程序轮播图1

<!-- 轮播图 -->
<swiper circular indicator-dots indicator-color="#cccccc" indicator-active-color="#ff0000" autoplay="true" interval="5000" duration="500">
  <block wx:for="{{swiperImg}}" wx:key="index">
    <swiper-item>
      <image src="{{item.src}}" class="silde-image"></image>
    </swiper-item>
  </block>
</swiper>
<!-- 笔记
1.轮播图外层容器  <swiper></swiper>
2.每一个轮播图项 <swiper-item></swiper-item>
3.<swiper></swiper>标签存在默认样式
  1.width:100%
  2.height:150px;    <image></image>标签存在默认宽度和高度320*24
  3.<swiper></swiper>高度无法实现由内容撑开
4.先找出来原图和高度等比例给swiper定高度和宽度
  假如原图的宽度和高度为：1125*325px
  swiper宽度 / swiper高度 = 原图的宽度 / 原图的高度
  swiper 高度 = swiper宽度  * 原图高度 / 原图宽度
  height:100vm * 352 / 1125
  如css样式:
  swiper{
    width:100%;
    height:cacl(100vm * 352 / 1125);
  }
  image{
    width:100%;
  }
5.autoplay="true" 自动轮播
6.interval="5000" 修改轮播时间
7.circular 衔接轮播
8.indicator-dots 显示指示器，分页器，索引器
9.indicator-color="#cccccc" 指示器的未选择的颜色
10.indicator-active-color="#ff0000"  选中的时候指示器的颜色-->