导语：
unslider是一个超小的jQuery轮播图插件，使用起来十分方便，但最后的效果却很美观。
使用步骤
1.引入jQuery和unslider
<script src="lib/jquery-1.8.2.js"></script>
<script src="lib/unslider-min.js"></script>
注意：在加载unslider之前一定要先加载jQuery，且jQuery的版本在1.8以上。
下载unslider的链接unslider官网，在上面也有一些实例，大家可以去看看。
2.编写HTML
<div class="picture-scroll" id="b04">
<ul>
<li><img src="picture1.png" alt="图片轮播"></li>
<li><img src="picture2.png" alt="图片轮播"></li>
<li><img src="picture3.png" alt="图片轮播"></li>
</ul>
</div>
3.使用CSS美化
此处建议引入unslider的CSS，因为unslider实现轮播图是给你自己的div外再加一层class为unslider的div，如果不引入，可能会产生一系列的小问题。下面给出我自己的CSS和我下载下修改过的unslider的CSS。
ul, ol {padding: 0;}
.picture-scroll {position: relative; overflow: auto; text-align: center;height: 500px;}
.picture-scroll ul {position: relative;}
.picture-scroll li {list-style: none; }
.picture-scroll ul li { float: left; }
.unslider-wrap li {float: left}
#b04 { width: 1260px;}
.unslider-arrow04 {display: block}
.unslider .unslider-nav { position: absolute; left: 48%; right: 0; bottom: 36px;z-index: 9999;}
.unslider .unslider-nav ol {height: 10px;}
.unslider .unslider-nav li {display: inline-block;float: left;width: 10px;height: 10px;margin: 0 10px;text-indent: -999em;border: 2px solid #fff;border-radius: 8px;cursor: pointer;opacity: .4;-webkit-transition: background .5s, opacity .5s;-moz-transition: background .5s, opacity .5s;transition: background .5s, opacity .5s;}
.unslider .unslider-nav li.unslider-active {background: #fff;opacity: 1;}
</br>
unslider的CSS ：
.unslider {position: relative;overflow: auto;margin: 0;padding: 0}
.unslider-wrap {position: relative}
.unslider-wrap.unslider-carousel > li {float: left}
.unslider-vertical > ul {height: 100%}
.unslider-vertical li {float: none;width: 100%}
.unslider-fade {position: relative}
.unslider-fade .unslider-wrap li {position: absolute;left: 0;top: 0;right: 0;z-index: 8}
.unslider-fade .unslider-wrap li.unslider-active {z-index: 10}
.unslider li, .unslider ol, .unslider ul {list-style: none;margin: 0;padding: 0;border: none}
.unslider-arrow {position: absolute;top: 280px;left: 60px;z-index: 100;cursor: pointer}
.unslider-arrow.next {left: auto;right: 60px}
4.调用插件
最后再加上这个js就可以实现轮播图了。
(function () {
var unslider04 = $('#b04').unslider({
speed: 500, // 动画的滚动速度
delay: 3000, // 每个滑块的停留时间
complete: function() {}, // 每个滑块动画完成时调用的方法
keys: true, // 是否支持键盘
dots: true, // 是否显示翻页圆点
fluid: true, // 支持响应式设计（有可能会影响到响应式）
autoplay:true, //自动轮播
animation: 'fade', //加入渐入动画
arrows: false //左右翻页不显示，可以设置为true让其显示
}),
data04 = unslider04.data('unslider');
$('.unslider-arrow04').click(function() { //左右翻页的点击函数
var fn = this.className.split(' ')[1];
data04[fn]();
});
})();
这个插件的使用方法到此就介绍完了，如果有什么有问题或者还有什么要补充的欢迎大家来提意见。谢谢大家。
