## 02 - 组件 - Carousel(轮播图)
走马灯组件，暂时不支持选择方向,当作轮播图使用


```js
export default class CarouselTest extends Component{
  _onChange = (value)=>{
    console.log(value);
  }
  render(){
    const testArr = [
      {src: 'http://mvimg2.meitudata.com/5630bce150dba1926.jpg'},
      {src: 'https://img6.bdstatic.com/img/image/pcindex/touxxiaophai.jpg'},
      {src: 'https://img6.bdstatic.com/img/image/pcindex/xingkonglahjuang.jpg'}
    ]
    const children = testArr.map((item, index)=>{
      return <img key={index} style={{height:"100%"}} src={item.src} />
    });
    return <div>
      <h2>走马灯例子</h2>
      <Carousel 
        style={{height:300, position:'relative'}} 
        loop={true}                                     // 是否循环
        duration={1000}                                 // 动画执行时间
        autoplay={true}                                 // 是否自动滚动
        autoplayTimeout={2400}                          // 自动播放间隔
        sensitivity={0.1}                               // 滑动时的灵敏度
        disabled={false}                                // 是否禁用手势
        showPagination={false}                          // 是否显示分页器
        paginationContainerStyle={{textAlign:"right"}}  // 分页器的样式
        paginationDotStyle={{backgroundColor:"red"}}    // 分页器点的样式
        onChange={this._onChange}                       // 监测当前状态
        activeIndex={1}                                 // 初始化时，显示的下标
        easing={'cubicBezier(.25,1.71,.74,-0.65)'}      // 效果函数
        >
        {children}
      </Carousel>
    </div>
  }
}
```

----
* 所有属性均有默认属性，所以不必担心，没有赋值会报错。
* `style`中的`height`属性，如果没有设置将会默认为200
* 分页器为决定定位，使用时，注意父级的`posiiton:relative`
* 当前的`Carousel`中加入了`will-change`属性
* `onChange` 中可以监测当前的状态，不同的事件处理不同的数据
* 关于`easing`属性，值为`string`类型，暂时支持的是：
    * ease
    * easeIn
    * easeOut
    * easeInOut
    * linear
    * bounce
    * cubic
    * elastic
    * back
    * quad
    * cubicBezier(a,b,c,d)


> 备注：如有问题请联系 RTX:bujiangfeng。代码有重构可能