在上一篇文章中我大概介紹了unslider的基本特性和用法，並實現了一個簡單的圖片輪播特效。
那麼，在這一章上，我就繼續完善上一章我們做的圖片輪播，給它加上圖片，底部圓點導航，左右控制按鈕。
首先，我們還是在原來的代碼去修改：
我們現在的代碼是這樣的：
<!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>第一步
首先我們用圖片把原來的文字換掉，我們需要修改ul裏面的li，在li裏面添加img：
<li><img src="./lfwimages/01.jpg" alt="" width="640" height="480" ></li>
<li><img src="./lfwimages/02.jpg" alt="" width="640" height="480" ></li>
<li><img src="./lfwimages/03.jpg" alt="" width="640" height="480" ></li>
<li><img src="./lfwimages/04.jpg" alt="" width="640" height="480" ></li>
<li><img src="./lfwimages/05.jpg" alt="" width="640" height="480" ></li>然後我們給img設置樣式，控制他們的寬高，在這裏我是單獨控制的，小夥伴們也可以統一設置，我也建議統一設置，這樣比較好維護！
設置好img的寬高後，我們之前控制了li的高度，現在我們要把這個樣式去掉，不控制li的高度，因爲在li裏面的img設置了寬高，會把li撐起來的。
除此之外，我們之前並沒有設置最外層的div的寬高，現在我們需要設置div的寬高和img的等同。這樣比較好看。最後別忘了在總體樣式中把img的margin和padding清零。
這是修改後的樣式：
<style type="text/css">
html, body, ul, ol ,img{
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 { width: 640px;height:480px;}
</style>第二步
我們添加好圖片以後，接下來就是給圖片輪播添加圓點導航了，由於unslider的強大，圓點導航的html的結構代碼不用我們再寫出來，而是在javascript中動態生成，在自動生成的圓點導航中，其實是一個有序列表，它的ul的class名爲dots，所以，我們只需要用這個類名寫好圓點導航的樣式就可以了。
需要強調的一點是，如果需要兼容IE8和以下的瀏覽器，圓點的樣式就不能像下面那樣用css3的樣式寫，需要換成用圖片替換，設置好background的樣式就好了。
具體樣式如下，有註釋，所以這裏就在解釋樣式內容了：
#b01 .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
#b01 .dots li
{
/*設置li以塊狀橫向排列*/
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
/*縮進文字*/
text-indent: -999em;
border: 2px solid #fff;
/* 把li的外觀設置爲圓形css3樣式*/
border-radius: 6px;
/* 當時鼠標經過時，鼠標成小手狀態*/
cursor: pointer;
/*設置透明度*/
opacity: .4;
/*以下爲適應各瀏覽器的動畫效果*/
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
/*圓點導航在活動狀態（被選中）時的樣式*/
#b01 .dots li.active
{
background: #fff;
opacity: 1;
}
寫好圓點樣式後，我們還需要在js代碼中打開圓點導航功能
具體代碼如下：
<script type="text/javascript">
$(document).ready(function(e) {
$('#b01').unslider({
dots: true
});
});
</script>第三步
圓點導航設置好了以後，我們接下來就要給圖片輪播添加左右箭頭導航了
首先我們需要在html結構中添加兩個a標籤。用於做導航按鈕：
<div class="banner" id="b01">
<ul>
<li><img src="01.jpg" alt="" width="640" height="480" ></li>
<li><img src="02.jpg" alt="" width="640" height="480" ></li>
<li><img src="03.jpg" alt="" width="640" height="480" ></li>
<li><img src="04.jpg" alt="" width="640" height="480" ></li>
<li><img src="05.jpg" alt="" width="640" height="480" ></li>
</ul>
<a href="javascript:void(0);" class="unslider-arrow01 prev"><img class="arrow" id="al" src="./lfwimages/arrowl.png" alt="prev" width="20" height="35"></a>
<a href="javascript:void(0);" class="unslider-arrow01 next"><img class="arrow" id="ar" src="./lfwimages/arrowr.png" alt="next" width="20" height="37"></a>
</div>
接下來給按鈕寫樣式，直接添加這段樣式代碼到樣式中：
#b01 .arrow { position: absolute; top: 200px;}
#b01 #al { left: 15px;}
#b01 #ar { right: 15px;}最後，去修改js代碼：
<script type="text/javascript">
$(document).ready(function(e) {
var unslider01 = $('#b01').unslider({
dots: true
}),
data01 = unslider01.data('unslider');
$('.unslider-arrow01').click(function() {
var fn = this.className.split(' ')[1];
data01[fn]();
});
});
</script>那麼到這裏，我們的圖片輪播的就修改完成了，我們來看一下最終運行效果
