前短時間在做一個網頁，然後要用到圖片輪播，這下頭大了，新手一枚，自己又不會寫圖片輪播，即使寫出來也是很糟糕，不好維護的。怎麼辦呢，百度咯。。。。！於是我找到了一個JQuery的圖片輪播插件叫unslider，符合我的項目要求。雖然最後並沒有採用，但是仍然有學習的價值。因此寫下一篇博客，以後忘記了還可以回來看，也當做在這裏儲備知識了。
提示：
（這裏面的知識需要JQuery和Javascript基礎，沒學過這兩個知識點的小夥伴們，建議先去學習這兩個知識點後再來看本文章）
下面我就開始介紹一下這個框架：
unslider這個圖片輪播框架很小，
不到3kb，
支持鍵盤導航，
支持響應式佈局，
支持主流瀏覽器，
並且支持IE6+，
（這裏由於我沒有IE6可以用來測試，支持IE6是別人測試後反饋的額，而我最低只是測試過I8可運行！）
在這裏我先給大家提供一個可下載這個插件的網址，大家可以在這裏通過這個地址下載插件，也可以自己百度下載。
前往下載地址
下面我們可以先看看unslider插件的可用參數：
（覺得不全面的，可以自己去下載並查看源代碼，在源代碼中可以看到更多更加詳細的參數）
代碼裏都有註釋，這裏不做解釋了
$('#element').unslider({
speed: 500, // 滾動速度
delay: 2000, // 動畫延遲
complete: function() {}, // 動畫完成的回調函數 // 在每個動畫之後調用的函數
keys: true, // 啓動鍵盤導航
dots: true, // 顯示點導航
fluid: true, // 支持響應式設計 // 是否寬度自適應
loop: true,
autoplay: true// 是否無盡循環播放
arrows: f, // 是否顯示向前和向後的箭頭
prev: '←', // 向前按鈕中的顯示文字(或html片段)
next: '→', // 向後......
starting: f, // 在每個動畫前調用的函數
items: '>ul', // 幻燈片的容器選擇器
item: '>li', // 需要滾動的選擇器
easing: 'swing',// 動畫的緩動函數(easing function)
autoplay: true // 是否允許自動播放
});
看完unslider插件的參數後，現在要考慮的是怎麼使用這個插件？
下面我就先做個最簡單的演示，這些演示代碼網上都有，也都是大同小異的，可以說基本都是unslider開發者提供的教程代碼。
首先我們先在網頁的<head></head> 標籤裏導入Jquery和unslider插件
jquery插件可以自己去百度下載，這裏就不多講了。
<head>
<meta charset="UTF-8">
<title>unslider圖片輪播</title>
<script src="jquery包/jquery.js"></script>
<script src="jquery包/unslider.min.js"></script>
</head>接着我們先完成html部分的結構：
<div class="banner" id="b01">
<ul>
<li>This is a slide.</li>
<li>This is another slide.</li>
<li>This is a final slide.</li>
</ul>
</div>完成了html結構後，我們還要寫點樣式：
<style type="text/css">
html, body, ul, ol {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
padding: 0;
margin: 0;
}
.banner {
position: relative;
text-align:center;
}
.banner li { list-style: none; }
.banner ul li { float: left; }
#b01 ul li { height: 100px;}
</style>在這裏我大概解釋一下這部分的css，首先呢，我們要整體控制好html的整體佈局樣式，主要是把margin,padding 都清零。
接着寫好最外面那層的div樣式，高度和寬度都可以自己調，這裏的寬度是佔滿，高度適應li的高度
一定要寫的是css屬性是position並且要設置爲relative;然後還要把溢出盒子的內容給隱藏掉，所以也要寫overflow: auto; auto屬性值也可以改爲hidden。
接着就要去掉無序列表的默認樣式 list-style: none;，也就是每個li前面的圓點。然後再把li橫向右排列 float: left;
最後再調用unslider插件就好了
<script type="text/javascript">
$(document).ready(function(e) {
$('#b01').unslider();
});
</script>提示： unslider插件的 JavaScript代碼一定要在圖片輪播的html代碼結構之後調用，放在圖片輪播的html代碼結構之前會導致找不到相應元素的錯誤，最終導致輪播無法運行。
以下是完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>unslider圖片輪播</title>
<script src="jquery包/jquery.js"></script>
<script src="jquery包/unslider.min.js"></script>
<style type="text/css">
html, body, ul, ol {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
padding: 0;
margin: 0;
}
.banner { position: relative;overflow: auto; text-align: center;}
.banner li { list-style: none; }
.banner ul li { float: left; }
#b01 ul li { height: 100px;}
</style>
</head>
<body>
<div class="banner" id="b01">
<ul>
<li>This is a slide.</li>
<li>This is another slide.</li>
<li>This is a final slide.</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
$('#b01').unslider();
});
</script>
</body>
</html>好了，到這裏，一個最簡單的圖片輪播已經完成了。
unslider的更多用法將在下一篇文章中介紹。大家也可以自行百度。
最後本人再強調一下，本人寫文章除了分享知識以外，主要目的是爲了給我自己記錄一些筆記和經驗，所以不喜歡我寫的東西的，請勿噴！若你更好的建議或者想法，可以給我留言和我分享，歡迎大牛過來指教！
若有雷同，純屬巧合！！！！