有两种应用方式：

1、轮播图片作为<img>标签使用

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代码：

            
                                       
         
示例
    
     
        
              
      
            
       
            
       
            
       
            
       
            
       
        
      
        
              
          
     
    
         

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标签背景更妥当