Skip to content
/ iSlider Public
forked from be-fe/iSlider

Smooth slider for Mobile WebApp, HTML5 App, Hybrid App

License

Notifications You must be signed in to change notification settings

wtz/iSlider

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

iSlider

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

  • 能够自定义动画,自带的动画包括 旋转(rotate), 三维(3d), 轻弹(flip), 默认(default)
  • 你能够简易地添加回调函数(onslidestart, onslide, onslideend, onslidechange)
  • 我们还支持滑动衰减效果,循环效果,自动滑动效果,水平/垂直滑动

iSlider展示

开始部署iSlider

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

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

var data = [{
	height: 475,
	width: 400,
	content: "imgs/1.jpg",
},{
	height: 527,
	width: 400,
	content: "imgs/2.jpg",
},{
 	height: 400,
 	width: 512,
 	content: "imgs/3.jpg",
}];

HTML代码如下:

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

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

<script type="text/javascript">
	var mySlider = new ISlider({
		dom : document.getElementById('iSlider-wrapper'),
		data : data
	});
</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 mySlider = 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), 三维(3d) and 轻弹(flip)
onslide Function 手指滑动时的回调函数
onslidestart Function 手指触屏时的回调函数
onslideend Function 手指离开屏幕时的回调函数
onslidechange Function 自动滑动模式下当图片滑动时的回调函数
isDebug Boolean (true | false) 开启/关闭调度模式
isLooping Boolean (true | false) 开启/关闭循环模式
isAutoplay Boolean (true | false) 开启/关闭自动滑动模式
isVertical Boolean (true | fasle) 开启水平/垂直滑动模式

License (MIT)

Copyright (c) 2014 BE-FE

MIT

About

Smooth slider for Mobile WebApp, HTML5 App, Hybrid App

Resources

License

Stars

Watchers

Forks

Packages

No packages published