图片滑动组件iSlider

iSlider

• • iSlider English Official Page 

iSlider Example

iSlider是一个表现出众，无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素，例如图片或者DOM元素。它有如下特性：

• 性能极好，硬件加速，极小占用内存
• 能够自定义动画，自带的动画包括 default, rotate, depth, flow, flip, card
• 你能够简易地添加回调函数(onslidestart, onslide, onslideend, onslidechange)
• 我们还支持滑动衰减效果，循环效果，自动滑动效果，水平/垂直滑动
• 支持桌面鼠标动作，方便测试
• 支持图片预加载，改善用户体验
• 支持手势缩放，解决图片太大无法看清问题

iSlider结构说明

• islider_core.js： iSlider核心代码库,定义iSlider类，绑定touch事件，图片预加载逻辑，以及图片翻页逻辑
• islider_dot.js： 支持在图片上添加页码标示，支持点击翻页，以...展示，demo地址
• islider_button.js： 支持在图片上添加页码标示，支持点击翻页. 以左右图标展示demo地址
• islider_animate.js： islider滑动效果库，目前支持flip、depth、flow等翻页效果. demo地址
• islider_zoom.js： 针对type为pic类型的滑动元素提供的手势缩放功能，支持android和ios中手势缩放功能，同时支持边缘检测demo地址

iSlider展示

若是PC，请打开webkit浏览器进行测试

动画效果

• 
• 
• 

default  rotate  flip  depth  flow  card

垂直轮播

不循环模式(最始及最末图片滑动会有衰减效果)

• 
• 

DOM

Home  Mail  News  TV Game

• Game

  This is Game center

  Let's rock it!

• Home

  This is home page

  home is pretty awsome

• Mail

  This is Mail box

  A lot of junk mail

开始部署iSlider

部署iSlider最容易的办法是查阅我们提供的简易例子。大部份代码存放在demo文件夹的文件里面。iSlider 是必要新建的一个类。

在你开始之前，你需要为iSlider先新建好数据:

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",
}];

HTML代码如下:

<div id="iSlider-wrapper"></div>

要使其运行，按下面例子新建ISlider类:

<script type="text/javascript">
    var iSlider = new iSlider({
    dom : document.getElementById('iSlider-wrapper'),
    data : data
    });
    </script>

如果你想加其它效果，可以按照我们demo/picture示例添加:

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

That's it.

配置iSlider

除了上文提到的基本部署模式，你还可以自定义我们提供的特性。例如，如果你想滑动DOM元素而非图片，你可以按以下的格式新建DOM数据:

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>'
}];

如果你想实现介绍部份提到的效果，你可以按以下格式设置:

<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>

深入了解iSlider

这里提供对iSlider类选项最清楚的描述:

选项	数值	解释
dom	HTML Object	包含图片或者DOM元素的包裹DOM元素
data	Array of Content(picture | html)	若是图片数据，格式如下: [{ height: 377, width: 600, content:"pics/1.jpg" }]
type	String (pic | dom)	默认值是'pic', 也支持'dom'
duration	Integer (1000 == 1s)	每个图片滑动的间隔时间，仅限于自动滑动模式
animateType	String	目前支持default, rotate, flip, depth, flow 和 card
onslide	Function	手指滑动时的回调函数
onslidestart	Function	手指触屏时的回调函数
onslideend	Function	手指离开屏幕时的回调函数
onslidechange	Function	自动滑动模式下当图片滑动时的回调函数
isDebug	Boolean (true | false)	开启/关闭调度模式
isLooping	Boolean (true | false)	开启/关闭循环模式
isAutoplay	Boolean (true | false)	开启/关闭自动滑动模式
isVertical	Boolean (true | fasle)	开启水平/垂直滑动模式
isOverspread	Boolean (true | fasle)	是否平铺整个浏览器屏幕
useZoom	Boolean (true | fasle)	是否使用缩放

更多demo请扫二维码

• 默认

  

• 手势缩放

  

• 小点翻页

  

• 箭头翻页

  

• 导航滑动

  

• 垂直滑动

  

License (MIT)

Copyright (c) 2014 BE-FE

MIT