jquery图片轮播带进度条样式怎么改变

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Slider </title>
    <link rel="stylesheet" type="text/css" href="jqueryui/css/smoothness/jquery-ui-1.7.2.custom.css">
    <link rel="stylesheet" type="text/css" href="slider.css">
  </head>
  <body>
  
    <div id="sliderContent" class="ui-corner-all">
      
      <div class="viewer ui-corner-all">
        <div class="content-conveyor ui-helper-clearfix">          <div class="item">
            
            <img src="images/01.jpg" alt="Omega Nebula">          </div>          <div class="item">
            
            <img src="images/02.jpg" alt="Rosette Nebula">          </div>
          
          <div class="item">
            
            <img src="images/03.jpg" alt="Ring Nebula">          </div>          <div class="item">
            
            <img src="images/04.jpg" alt="Tarantula Nebula">          </div>          <div class="item">
            
            <img src="images/05.jpg" alt="Triangulum Nebula">          </div>          <div class="item">
            
            <img src="images/06.jpg" alt="Eagle Nebula">          </div>          <div class="item">
            
            <img src="images/07.jpg" alt="Crab Nebula">          </div>
          
        </div>
      </div>
      <div id="slider"></div>
    </div>
    <script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
      $(function() {
        
//vars
var conveyor = $(".content-conveyor", $("#sliderContent")),
item = $(".item", $("#sliderContent"));

//set length of conveyor
conveyor.css("width", item.length * parseInt(item.css("width")));

        //config
        var sliderOpts = {
  max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
          slide: function(e, ui) { 
            conveyor.css("left", "-" + ui.value + "px");
          }
        };        //create slider
        $("#slider").slider(sliderOpts);
      });
    </script>
  </body>
</html>---------------------------------slider.cssh2 { text-align:center; font:normal 150% Georgia; }
#sliderContent { width:650px; margin:auto; padding:0 50px 50px; background-color:#ebebeb; border:0px solid #898989; }
.viewer { width:500px; height:340px; margin:0 auto 40px; padding:1px; overflow:hidden; position:relative; border:1px solid #898989; }
.content-conveyor { width:610px; height:335px; position:relative; }
.item { width:410px; float:left; font-family:Tahoma; text-align:center; background-color:#ebebeb; }
.item h2 { font-size:100%; margin:10px 0; }
.item dl { margin:10px 0; }
.item dt, .item dd { float:left; width:149px; text-align:right; margin:0; font-size:70%; }
.item dt { font-weight:bold; margin-right:5px; }
.item dd { text-align:left; }
.item img { border:1px solid #898989; background-color:#ffffff; padding:1px; }----------------------------------------
怎么把下面进度条的按钮改成这种样式？？http://www.queen-photo.com/casedetail.php?ID=115谢谢