iSlider，解决移动开发痛点的高性能滑块

• 
• 下载源代码 - 891 KB

相关链接

• Github 页面：https://github.com/BE-FE/iSlider (包含英文 README)
• 官方页面：http://be-fe.github.io/iSlider/index_en.html

Content

滑块似乎是大多数网站中非常常见的组件。著名的解决方案包括 iScroll、Swiper 等项目。

乍一看，我认为没有必要制作类似的组件，这是一种浪费时间。直到有一天，我看到了 iSlider。我敢打赌，这可能是市场上最流畅的滑块组件。令我惊讶的是，在如此轻量级的框架中，它为开发人员提供了丰富的动画类型可供选择。我觉得这一定是一个有意义的项目，所以我决定加入并找到它为何有潜力超越 iScroll 和 Swiper 等同类产品的秘密和武器。

它的特点：

• 其出色性能的关键在于 iSlider 仅维护 3 个“li”，以尽可能缩小内存占用。因此，您在 iSlider 中永远不会遇到卡顿问题。
• 它是一个轻量级框架。压缩后约 2KB。
• 它支持图片和 DOM，这两种常见的 Webapp 元素。
• 它提供多种动画类型，您当然可以自己定制。
• 回调函数，例如 onslidestart、onslideend 等。
• 支持阻尼效果、垂直滑动和自动滑动。

目前，它有稳定的版本，但它仍然是一个快速增长的项目。或早或晚，更多的功能将被添加到该组件中。无论添加什么功能，我们都会牢记最佳性能是我们的目标。

我会让您了解一些未来的发展方向，它们将在未来一两周内发生。

• 图像加载器
• 放大和缩小
• 标签切换菜单

实际上，这不仅仅是一篇推荐文章，而是一篇招聘文章。我真诚地希望您能加入这个快速增长的项目并创造奇迹。

Using the Code

学习 iSlider 的最佳方式是查看演示。在存档中，您会找到一个演示文件夹。大多数脚本功能都在那里概述。 iSlider 是一个需要为每个 DOM 区域初始化的类。

在开始之前，您需要为 iSlider 准备一些数据

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

您只需要准备的 HTML 结构是

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

要使其可运行，您只需初始化

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

就是这样。

配置 iSlider

除了使用 iSlider 可以做的基本方式外，您还可以自定义我们提供的功能。例如，如果您更喜欢将 DOM 元素放在列表中，您可以像这样更改数据数组

var data = [{
	'height' : '100%',
	'width' : '100%',
	'content' : '<div><h1>Home</h1>
	<h2>This is home page</h2><p>home is pretty awesome</p><div>'
},{
	'height' : '100%',
	'width' : '100%',
	'content' : '<div><h1>Page1</h1>
	<h2>This is page1</h2><p>page1 is pretty awesome</p><div>'
},{
	'height' : '100%',
	'width' : '100%',
	'content' : '<div><h1>Page2</h1>
	<h2>This is Page2</h2><p>Page2 is pretty awesome</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

在这里，我清楚地描述了您可以操作的选项

		[{
			height: 377,
			width: 600,
			content:"pics/1.jpg"
		}]