有两种应用方式：
1、轮播图片作为<img>标签使用
HTML代码：
<html> <head> <meta charset="utf-8"> <script src="jquery-1.11.1.min.js"></script> <script src="unslider.min.js"></script> </head> <body> <!-- example_begin --> <h2>示例</h2> <div class="banner" id="b04"> <!-- 作为img标签使用 --> <ul> <li><img src="images/01.jpg" alt="" width="640" height="480"></li> <li><img src="images/02.jpg" alt="" width="640" height="480"></li> <li><img src="images/03.jpg" alt="" width="640" height="480"></li> <li><img src="images/04.jpg" alt="" width="640" height="480"></li> <li><img src="images/05.jpg" alt="" width="640" height="480"></li> </ul> <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="images/arrowl.png" alt="prev" width="20" height="35"></a> <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="images/arrowr.png" alt="next" width="20" height="37"></a> </div> <!-- example_end --> </body> </html>
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; } #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; }
JS代码：
$(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](); }); });
效果图：
2、轮播图片作为<li>标签背景图片使用
HMTL代码：
<html> <head> <meta charset="utf-8"> <script src="jquery-1.11.1.min.js"></script> <script src="unslider.min.js"></script> </head> <body> <!-- example_begin --> <h2>示例</h2> <div class="banner" id="b04"> <!-- 作为背景图片使用 --> <ul> <li id="index_pic1" class="index_pic1"></li> <li id="index_pic2" class="index_pic2"></li> <li id="index_pic3" class="index_pic3"></li> <li id="index_pic4" class="index_pic4"></li> <li id="index_pic5" class="index_pic5"></li> </ul> <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="images/arrowl.png" alt="prev" width="20" height="35"></a> <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="images/arrowr.png" alt="next" width="20" height="37"></a> </div> <!-- example_end --> </body> </html>
CSS代码：在上面CSS的基础上添加以下代码
.index_pic1{ width: 640px; height: 480px; margin: 0 auto; overflow: hidden; background: url(images/01.jpg) no-repeat; } .index_pic2{ width: 640px; height: 480px; margin: 0 auto; overflow: hidden; background: url(images/02.jpg) no-repeat; } .index_pic3{ width: 640px; height: 480px; margin: 0 auto; overflow: hidden; background: url(images/03.jpg) no-repeat; } .index_pic4{ width: 640px; height: 480px; margin: 0 auto; overflow: hidden; background: url(images/04.jpg) no-repeat; } .index_pic5{ width: 640px; height: 480px; margin: 0 auto; overflow: hidden; background: url(images/05.jpg) no-repeat; }
JS代码：与上面的JS代码一致
效果图：
总结：
轮播图片作为img标签时，在显示区域大小固定的情况下适用；在轮播图片需要跟随可视窗口大小自适应的情况下，作为li标签背景更妥当