轮播图 Carousel

示例

基本形式

<carousel>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/1.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/2.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/3.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/4.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/5.jpg" /></carouselItem>
</carousel>

动画

fade

<carousel animation="fade">
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/1.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/2.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/3.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/4.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/5.jpg" /></carouselItem>
</carousel>

scroll

<carousel animation="scroll">
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/1.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/2.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/3.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/4.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/5.jpg" /></carouselItem>
</carousel>

swipe

<carousel animation="swipe">
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/1.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/2.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/3.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/4.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/5.jpg" /></carouselItem>
</carousel>

zoom-in

<carousel animation="zoom-in">
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/1.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/2.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/3.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/4.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/5.jpg" /></carouselItem>
</carousel>

zoom-out

<carousel animation="zoom-out">
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/1.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/2.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/3.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/4.jpg" /></carouselItem>
    <carouselItem><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1135/images/5.jpg" /></carouselItem>
</carousel>

API

Class

Carousel

继承自Component。

Options

new Carousel()

参数	类型	默认值	数据流向	描述
`data`	object			绑定属性
`data.current`	number	`0`	outside <=> inside	当前页
`data.duration`	number	`4000`	outside => inside	切换间隔
`data.animation`	string	`''`	outside => inside	动画。支持`fade`, `scroll`, `swipe`, `zoom-in`, `zoom-out`
`data.titleTemplate`	string		outside @=> inside	标题模板
`data.disabled`	boolean	`false`	outside => inside	是否禁用
`data.visible`	boolean	`true`	outside => inside	是否显示
`data.class`	string	`''`	outside => inside	补充class