iSlider專注于移動(dòng)端的滑動(dòng)解決方案

iSlider是一個(gè)表現(xiàn)出眾，輕量且高性能，無任何庫依賴的跨平臺(tái)滑動(dòng)控件。它能夠處理大多數(shù)的滑動(dòng)場(chǎng)景，提供多種切換動(dòng)畫效果，展示多種類型的場(chǎng)景。

特性

• 優(yōu)秀的性能，更少的內(nèi)存占用；
• 提供豐富的動(dòng)畫切換效果，自帶的效果包括 default, rotate, depth, flow, flip, card, fade 等，并且可以進(jìn)行無限的擴(kuò)展；
• 提供豐富的回調(diào)觸發(fā)器，并且添加回調(diào)函數(shù)極為方便，無論在初始化還是運(yùn)行過程中；
• 支持滑動(dòng)衰減效果，循環(huán)效果，自動(dòng)滑動(dòng)效果，水平/垂直滑動(dòng)等眾多參數(shù)，且功能皆可配置；
• 自動(dòng)適配桌面鼠標(biāo)動(dòng)作與移動(dòng)端手勢(shì)，方便測(cè)試與跨平臺(tái)使用；
• 支持圖片預(yù)加載，優(yōu)秀的用戶體驗(yàn)；
• [插件] 提供多種插件，如切換按鈕、場(chǎng)景指示器、圖片縮放等，提供插件注冊(cè)、管理等方法方便自定義擴(kuò)展；
• [2.0+] 可以按需加載需要的功能（效果 或 插件）；
• [2.0+] 支持更多種類的元素置入，自動(dòng)匹配數(shù)據(jù)類型，識(shí)別圖片并進(jìn)行預(yù)加載；
• [2.0+] 更完善的代理事件管理機(jī)制，優(yōu)化內(nèi)存占用；
• [2.0+] 更加豐富的回調(diào)事件，更靈活的事件管理、觸發(fā)機(jī)制。

而使用iSlider也非常容易上手，你只需要準(zhǔn)備一個(gè)dom節(jié)點(diǎn)用來存放你的slider：

var data = [{
    height: 414,
    width: 300,
    content: "imgs/1.jpg",
},{
    height: 414,
    width: 300,
    content: "imgs/2.jpg",
},{
    height: 414,
    width: 300,
    content: "imgs/3.jpg",
}];

然后你需要準(zhǔn)備展示的數(shù)據(jù)，這里展示的數(shù)據(jù)分兩種類型，拿圖片類型的slider 舉例，你只需要準(zhǔn)備好的是圖片的json 數(shù)據(jù)，數(shù)據(jù)格式如下:

var data = [{
    'height' : '100%',
    'width' : '100%',
    'content' : '<div><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'
},{
    'height' : '100%',
    'width' : '100%',
    'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'
},{
    'height' : '100%',
    'width' : '100%',
    'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</p><div>'
}];

調(diào)用時(shí)候，需要對(duì)iSlider 實(shí)例化：

<script type="text/javascript">
    var islider = new iSlider({
        dom : document.getElementById('iSlider-wrapper'),
        data : data,
        duration: 2000,
        isVertical: true,
        isLooping: true,
        isDebug: true,
        isAutoplay: true
    });
</script>

這樣就可以運(yùn)行一個(gè)iSlider 的實(shí)例了，關(guān)于上面一些參數(shù)的意義，可以在官網(wǎng)看到：

http://be-fe.github.io/iSlider/

• iSlider 的依賴：iSlider 不依賴任何庫或是框架，你可以很輕松的把他用在自己的項(xiàng)目中，不會(huì)和zepto 或是jqmobi 沖突。

• 體積大小：iSlider 壓縮后代碼2kb，你可以很隨意的打包在你的項(xiàng)目中。

• 性能上：iSlider借助了手機(jī)硬件加速，所有的動(dòng)畫都盡可能重用dom ，并且使用盡可能少dom 來完成整個(gè)渲染，支持無盡的滾動(dòng)，并且在手指快速滑動(dòng)中也達(dá)到流暢的體驗(yàn)。