## Slider
輪播組件，主要使用場景有網頁中的運營廣告 Banner。
### 調用方式
HTML 示意：
~~~
<div class="ui-slider">
<ul class="ui-slider-content" style="width: 300%">
<li class="current"><span style="background-image:url(http://placehold.sinaapp.com/?640*200)"></span></li>
<li><span style="background-image:url(http://placehold.sinaapp.com//?640*200)"></span></li>
<li><span style="background-image:url(http://placehold.sinaapp.com//?640*200)"></span></li>
</ul>
</div>
~~~
這里定義兩個概念：wrapper 和 scroller。wrapper 即外層的包含 DOM，如 div.ui-slider；scroller 即內部滾動的元素，如 ul.ui-slider-content。組件初始化的時候需要傳入 wrapper ('.ui-slider')。實際滾動的是內部的 scroller ('.ui-slider-content')。小圓點指示器會自動生成（ul.ui-slider-indicators）。目前對類名有要求，未來將支持自定義類名。
組件會自動為 ui-slider-content、ui-slider-indicators 內的 li 元素添加 current 類。
JS 示意：
~~~
window.addEventListener('load', function(){
/* fz 即 FrozenJS 的意思 */
var slider = new fz.Scroll('.ui-slider', {
role: 'slider',
indicator: true,
autoplay: true,
interval: 3000
});
/* 滑動開始前 */
slider.on('beforeScrollStart', function(from, to) {
// from 為當前頁，to 為下一頁
})
/* 滑動結束 */
slider.on('scrollEnd', function(cruPage) {
// curPage 當前頁
});
})
</script>
~~~
### 配置說明
<table width="100%">
<tbody><tr>
<th>name</th>
<th>type</th>
<th>default</th>
<th>description</th>
</tr>
<tr>
<td>indicator</td>
<td>boolean</td>
<td>true</td>
<td>指示點</td>
</tr>
<tr>
<td>autopaly</td>
<td>boolean</td>
<td>false</td>
<td>自動播放</td>
</tr>
<tr>
<td>interval</td>
<td>int</td>
<td>2000ms</td>
<td>自動播放間隔時間</td>
</tr>
<tr>
<td>duration</td>
<td>int</td>
<td>300ms</td>
<td>切換動畫過渡時間</td>
</tr>
<tr>
<td>bounce</td>
<td>boolean</td>
<td>true</td>
<td>反彈動畫</td>
</tr>
<tr>
<td>beforeScrollStart</td>
<td>function</td>
<td>function(){}</td>
<td>滑動開始前調用（參數：來源頁from、切換頁to）</td>
</tr>
<tr>
<td>scrollEnd</td>
<td>function</td>
<td>function(){}</td>
<td>滑動結束時調用（參數：當前頁 curPage）</td>
</tr>
<tr>
<td>enable()</td>
<td>function</td>
<td>-</td>
<td>全局開關，開啟滾動</td>
</tr>
<tr>
<td>disable()</td>
<td>function</td>
<td>-</td>
<td>全局開關，禁止滾動</td>
</tr>
<tr>
<td>refresh()</td>
<td>function</td>
<td>-</td>
<td>刷新當前位置</td>
</tr>
<tr>
<td>destroy()</td>
<td>function</td>
<td>-</td>
<td>銷毀對象</td>
</tr>
</tbody></table>
### DEMO演示
~~~
<!-- html -->
<div class="ui-slider">
<ul class="ui-slider-content" style="width: 300%">
<li><span style="background-image:url(http://placehold.sinaapp.com/?640*200)"></span></li>
<li><span style="background-image:url(http://placehold.sinaapp.com//?640*200)"></span></li>
<li><span style="background-image:url(http://placehold.sinaapp.com//?640*200)"></span></li>
</ul>
</div>
<!-- js -->
<script>
(function(){
var slider = new fz.Scroll('.ui-slider', {
role: 'slider',
indicator: true,
autoplay: true,
interval: 3000
});
slider.on('beforeScrollStart', function(from, to) {
console.log(from, to);
});
slider.on('scrollEnd', function(cruPage) {
console.log(curPage);
});
})();
</script>
~~~
