标签：

Unslider--入门篇

　　背景：因工作需求，需要完成一个图片轮播效果，因博主不是专业的前端开发人员，so google之，经过挑选最终选择使用Unslider插件完成工作。

一、Unslider插件介绍

　　unslider插件是一个超小的Jquery轮播（slider）插件，大小不到3k，源码托管在GitHub上，是一个开源项目。

　　说了这么多特色了，看一下效果眼见为实吧，链接：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脚本，页面代码如下：

1 <script src="//code.jquery.com/jquery-latest.min.js"></script>
2 <script src="//unslider.com/unslider.js"></script>

2、准备HTML代码

　　div+ul li（无序列表），完美解决，无需额外的html标签！为了简洁我们的例子只写三个li，上代码！

 1 <div class="banner">
 2     <ul>
 3         <li style="width:100%;height:50px;background-color:red;">
 4             <h1>This is a slide.</h1>
 5         </li>
 6         <li style="width:100%;height:50px;background-color:yellow;">
 7             <h2>This is another slide.</h2>
 8         </li>
 9         <li style="width:100%;height:50px;background-color:blue;">
10             <h3>This is a final slide.</h3>
11         </li>
12      </ul>
13 </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--使用手册系列（一）

标签：

原文地址：http://www.cnblogs.com/ylhssn/p/4278157.html