jquery优秀插件——轮播图插件——unslider.js(用法二)
公共css部分：
html, body { font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}
ul, ol { padding: 0;}
.banner { position: relative; overflow: auto; text-align: center;}
.banner li { list-style: none; }
.banner ul li { float: left; }
示例 1：使用固定大小的图片，并限制容器大小
css部分：
#b02 { width: 640px;}html代码部分：
script部分：
$(document).ready(function(e) {
$('#b02').unslider();
});示例 2：在上一示例的基础上，加上圆点（指示器）。这里使用 CSS3 来添加，若要兼容 IE8 及以下，请使用图片背景添加。
css部分：
#b03 { width: 640px;}
#b03 .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
#b03 .dots li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
#b03 .dots li.active {
background: #fff;
opacity: 1;
}html部分：
script部分：
$(document).ready(function(e) {
$('#b03').unslider({
dots: true
});
});示例 3：在上一示例基础上，加上左右箭头。
css部分：
#b04 { width: 640px;}
#b04 .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
#b04 .dots li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
#b04 .dots li.active {
background: #fff;
opacity: 1;
}
#b04 .arrow { position: absolute; top: 200px;}
#b04 #al { left: 15px;}
#b04 #ar { right: 15px;}html部分：
script部分：
$(document).ready(function(e) {
var unslider04 = $('#b04').unslider({
dots: true
}),
data04 = unslider04.data('unslider');
$('.unslider-arrow04').click(function() {
var fn = this.className.split(' ')[1];
data04[fn]();
});
});示例 4：对轮播状态进行操作。
css部分：
#b05 { width: 640px;}
#b05 .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
#b05 .dots li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
#b05 .dots li.active {
background: #fff;
opacity: 1;
}
#b05 .arrow { position: absolute; top: 200px;}
#b05 #al { left: 15px;}
#b05 #ar { right: 15px;}html部分：