淘宝商城轻量级无缝轮播

 查看演示  website  立即下载

使用方法

HTML

<div >
 <div>Hi, I'm slide 1</div>
 <div>Hi, I'm slide 2</div>
 <div>Hi, I'm slide 3</div>
 <div>Hi, I'm slide 4</div>
</div>

JS

一些（可选）设置，你可以通过将对象作为参数传递更改。默认值如下所示。

new Siema({
 selector: '.siema',
 duration: 200,
 easing: 'ease-out',
 perPage: 1,
 startIndex: 0,
 draggable: true,
 threshold: 20,
 loop: false,
});

• selector ：（字符串或DOM元素）指定选择器

• duration ：（数字）滑动转换持续时间（以ms为单位）

• easing ：（字符串）与CSS中的transition-timing-function相同

• perPage ：（数字）要显示的幻灯片的数量

• startIndex ： （数字）起始滑块的索引（从零开始）

• draggable ：（布尔）使用拖动和触摸滑动

• threshold ：（数字）触摸和鼠标拖动阈值（以px为单位）

• loop ：（布尔）循环幻灯片

API

• next()  ：转到下一张幻灯片

• prev()  ：转到上一张幻灯片

• goTo(index)  ：转到特定幻灯片

• currentSlide  ：当前活动幻灯片的索引（只读）

PREVIOUS:
NEXT:
移动端canvas实现涂鸦效果
jQuery模拟手机虚拟键盘