前端框架，前端组件，前端库，都是一个意思，能看源码。
最近做H5小游戏，用到了图片轮播的组件，而且要求支持移动端触屏滑动。一开始用的是nivo slider，但是对大小不一样的图不支持box 的参数设置。unslider，满足了需求。
Unslider--入门篇
背景：因工作需求，需要完成一个图片轮播效果，因博主不是专业的前端开发人员，so google之，经过挑选最终选择使用Unslider插件完成工作。
一、Unslider插件介绍
unslider插件是一个超小的jQuery轮播（slider）插件，大小不到3k，源码托管在GitHub上，是一个开源项目。
1、跨浏览器
Unslider已经在所有最新的浏览器上测试过了，并能对那些老旧的浏览器也能做出很好的降级处理。（PS：博主亲测，在IE8上使用正常
2、支持键盘导航（没错，你没看错，就是键盘上的左右键，很炫，有木有！！）
3、自动调整高度
4、支持响应式布局（不懂的链接在此，自戳：响应式布局）
说了这么多特色了，看一下效果眼见为实吧，链接：http://www.bootcss.com/p/unslider/
看了效果，有没有感觉博主的好多文是copy来的,╮(╯▽╰)╭木办法，博主水平有限，只能边学边做笔记给大家分享了，多多包涵啦。（￣︶￣）↗
二、如何使用Unslider
1、引入jQuery和Unslider
使用Unslider，你需要在页面中引入Unslider和jquery脚本，jQuery版本不限，建议在版本1.8+（博主亲测使用1.8版本的jQuery.js可正常使用Unslider脚本）。
如何验证页面已引入jQuery脚本，按F12，在控制台中输入!!window.jQuery,若返回true，则说明页面中已引入jQuery脚本。
引入jQuery、Unslider脚本，页面代码如下：
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//unslider.com/unslider.js"></script>
2、准备HTML代码
div+ul li（无序列表），完美解决，无需额外的html标签！为了简洁我们的例子只写三个li，上代码！
<div class="banner">
<ul>
<li style="width:100%;height:50px;">
<h1>This is a slide.</h1>
</li>
<li style="width:100%;height:50px;">
<h2>This is another slide.</h2>
</li>
<li style="width:100%;height:50px;">
<h3>This is a final slide.</h3>
</li>
</ul>
</div>
PS：css样式以及h1、h2、h3标签的使用，只是为了能更好的展现出页面切换的效果，不必深究。
3、增加Css样式，使页面效果更漂亮
Unslider插件没有提供一个标准的CSS样式，你可以尽情操作每张幻灯片（每个li标签内存放一张幻灯片）的Css样式，*度之大可以想象。
1 .banner {
2 position: relative;
3 overflow: auto;
4 }
5 .banner li {
6 list-style: none;
7 }
8 .banner ul li {
9 float: left;
10 }
4、使用unslider插件
$(function() {
var slidey = $('.banner').unslider({
speed: 500,
delay: 3000,
complete: function() {},
keys: true,
dots: true,
fluid: false
});
data = slidey.data('unslider');
data.move(2, function() {});
});
二、源码分析
三、定制自己需要的幻灯片
终于看完大部分了。好了，通过源码至少我知道了该怎样去控制外观，现在我要动手啦，心里有点小激动呢~
我选择Unslider是因为它是如此纯粹，正如我想要的那样，啥也可以不要，只要能自动循环播放、用导航点控制翻页就满足我的要求了。
因为默认就是自动循环播放的，所以我只要设置一个显示导航点的参数即可，然后锦上添花也支持一下响应式吧：
通过源码我们知道unslider为我们写好了导航点的文档结构、并取好了类名，但并没有设置样式，所以只是传个参数是木有用滴，要自己写样式才能看见那些可爱的点点：
大功告成！
四、总结
对jquery的事件机制还不熟悉，遇到自定义事件啥的就犯晕了，这块知识还要多加学习。
摘自：http://blog.csdn.net/u011411283/article/details/47066481
感谢分享！