利用unslider实现轮播图

导语：

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]();    
  });
})();

        这个插件的使用方法到此就介绍完了，如果有什么有问题或者还有什么要补充的欢迎大家来提意见。谢谢大家。