導語：

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

? ????? 這個插件的使用方法到此就介紹完了，如果有什么有問題或者還有什么要補充的歡迎大家來提意見。謝謝大家。