anima-carousel
v2.1.0Carousel
Carousel又叫Slider,是经典的移动端幻灯切换组件。本组件支持自动播放、循环等。
快速调用说明
It is very easy to use this module.
HTML:
<div class="carousel carousel-big">
<div class="carousel-big-outer">
<ul class="carousel-big-wrap">
<li><a href="http://m.taobao.com"><img src="http://gtms04.alicdn.com/tps/i4/T1QVNSFMXaXXaZVCTS-300-100.png" width="300" height="100" alt="1" /></a></li>
<li><a href="http://m.taobao.com"><img class="lazyimg" dataimg="http://gtms01.alicdn.com/tps/i1/T1bFNSFNxaXXaZVCTS-300-100.png" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" width="300" height="100" alt="2" /></a></li>
<li><a href="http://m.taobao.com"><img class="lazyimg" dataimg="http://gtms02.alicdn.com/tps/i2/T141tRFRXaXXaZVCTS-300-100.png" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" width="300" height="100" alt="3" /></a></li>
<li><a href="http://m.taobao.com"><img class="lazyimg" dataimg="http://gtms03.alicdn.com/tps/i3/T1SnVNFFRcXXaZVCTS-300-100.png" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" width="300" height="100" alt="4" /></a></li>
</ul>
</div>
<div class="carousel-status"></div>
</div>
JavaScript:
carousel = new Carousel({
element: '.carousel',
trigger : '.carousel-status',
hasTrigger: true,
play : true,
interval: 1000,
loop : true
});
配置说明
参数释义
element element
- 页面 dom 节点,只读。
wrap string
- 滑动显示区域,默认为container的第一个子元素。(该元素固定宽高overflow为hidden,否则无法滑动)
panel string
- 面板元素,默认为wrap的第一个子元素
trigger string
- 触发元素,也可理解为状态元素
activeTriggerCls string
- 触发元素内子元素的激活样式,默认'sel'
hasTrigger Boolean
- 是否需要触发事件,例tab页签就需要click触发,默认false
steps Number
- 每次滑动的距离,默认0
left Number
- panel初始的x坐标,默认0
visible Number
- 每次滑动几个panels,默认1
margin Number
- 面板元素内子元素间的间距,默认0
curIndex Number
- 初始化在哪个panels上,默认0为第一个
duration Number
- 动画持续时间,默认300ms
loop Boolean
- 动画循环,默认false
play Boolean
- 动画自动播放,默认false
interval Number
- 播放间隔时间,默认5000ms,play为true时才有效
useTransform Boolean
- 以translate方式动画,支持3d默认true,不支持默认false
lazy String
- 图片延时加载属性,默认'.lazyimg'
lazyIndex Number
- 默认加载到第几屏,默认1
callback Function
- 动画结束后触发
prev String
- 上一个元素
next Function
- 下一个元素
activePnCls String
- prev和next在头尾时的样式,默认'none'
HTML结构
<div class="carousel"><!--容器层,container-->
<div class="carousel-outer"><!--滑动显示区域,wrap-->
<ul class="carousel-wrap"><!--面板元素,也就是做动画的元素,panel-->
<li></li> <!-- 一系列子元素,就是数据内容 -->
<li></li>
...
</ul>
</div>
</div>
实例API
instance.XXX()
- 说明
npm i anima-carousel
Metadata
- MIT
- Whatever
- [email protected]
- released 12/13/2016