1.关于unslider下载
官方提供的下载页面是http://www.bootcss.com/p/unslider/，但总是进不了下载页面，所以我就查看主页的源码，找到unslider.min.js链接，复制出来下载。
2.我的第一个banner
主页的教程是：
1.引入jQuery 和 Unslider
<script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="//unslider.com/unslider.js"></script>
2.准备HTML代码
<div class="banner"> <ul> <li>This is a slide.</li> <li>This is another slide.</li> <li>This is a final slide.</li> </ul> </div>
3.添加样式
.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }
4.调用unslider
$(function() {
$(‘.banner‘).unslider();
});
按照这个步骤我发现有一点小小的问题：在页面上什么也看不到，打开firebug能够看到确实是在滑动，我觉得是样式的问题，所以我把样式修改了一下，我把.banner加了一个背景色，又给下面的li标签也加了一个背景色和高度好让里面的字显示出来，这样分层也能很好地看出来，于是就变成了这样：
.banner {
position: relative;
overflow: auto;
background: #00f;
}
.banner li {
list-style: none;
}
.banner ul li {
float: left;
height: 200px;
background: #f00;
}
这样一改，.banner的背景变成了蓝色，li标签的背景变成了红色，还有一点分层的效果，字也能很清楚地看到。这样第一个banner效果就完成。
3.添加一些其他功能
当然，强大的unslider可不止这一点，接下来我要给banner下面加一个导航圆点。
我们在调用unslider的JS里面加入参数{dots: true}，即需要导航，在浏览器中用firebug可以看到自动为banner加了一个叫has-dots的类，并且在ul标签后面加了一个ol标签，这个ol标签就是导航的结构，这些都是unslider的JS自动完成的，并不能在HTML源码里看到，接下来我们在firebug里找到和导航有关的类有.dots,.dot,.active，这样就去为这些类添加一些样式：
.dots {
position: absolute;
width: 100%;
text-align: center;
right: 0;
bottom: 20px;
}
.dots li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.dots li.active {
background: #fff;
opacity: 1;
}
.dots必须要绝对定位，好让他能够浮在图片的上方，给他一个100%的宽度，并且在最右边，然后通过text-align使里面的小圆点居中，距离底部有个20PX距离。每一个小圆点设置一个宽、高和左右距离，再设置一个圆形的边框，就做出了一个小圆点，text-indent可以让里面的字不显示到我们的显示区域里来。最后给一个当前的样式。这样就完成 了小圆点导航。
其实小圆点还可以改成其他样式的，比如说方形或长条形，只需要改动他的宽、高和圆角就可以了，也可以更改颜色，或者在里面显示1、2、3这样的数字。
接下来是给banner加一个左右箭头的点击事件，自带有一个{arrows: true} ，但是这个很是不好看，我们准备自行弄一个图片，首先不调用原生的箭头，我们在ul标签前面加上：
<a href="javascript:void(0)" class="unslider-arrow prev"></a> <a href="javascript:void(0)" class="unslider-arrow next"></a>
这两行代码就是可以点击控制banner的左右滑动的。接下来是要给他们添加样式：
.unslider-arrow {
display: block;
position: absolute;
top: 50%;
margin-top: -25px;
height: 50px;
width: 50px;
z-index: 3;
opacity: 0.7;
filter: alpha(opacity=70);
background-color: #303030;
background-image: url(../images/unslider-arrow.png);
background-repeat: no-repeat
}
.prev {
left: 0px;
background-position: 0 0
}
.next {
right: 0px;
background-position: right 0
}
同样是要绝对定位，然后距离上下的距离可以调整，左右箭头分开再写一个样式，这个就可以用自己的图片来完成箭头的工作，当然还有最后一步，在JS里面控制他们：
var unslider = $(‘.banner‘).unslider();
$(‘.unslider-arrow‘).click(function(){
var fn = this.className.split(‘ ‘)[1];
unslider.data(‘unslider‘)[fn]();
});
此段代码的意思就是当点击一个箭头时，获取到当前点击箭头的类名，这里只有"unslider-arrow prev"或"unslider-arrow next"，然后把他通过空格转换成数组，再取数组的第二个元素，即为"prev"或"next"
最后其实是调用了unslider的data方法，换个方式看就是：unslider.data(‘unslider‘).prev()或unslider.data(‘unslider‘).next()即实现左右滑动。
4.总结
unslider还有另外一些参数，比如speed,delay,pause,keys,fluid等，可以调整速度，延迟，键盘控制和响应式，总的来说这是一个很不错的banner插件，而且大小不到3KB，非常好用，如果能把他的方法，属性弄清楚将会有很大的帮助。
原文：http://www.cnblogs.com/lonely-lee/p/5060630.html