轮播焦点图

script:      

<script src="js/lubotu.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                $(".lubo").lubo({
                });
            })
        </script>

html:

    <!--banner-->
        <div class="lubo">
            <ul class="lubo_box">
                <li style=" opacity: 1;filter:alpha(opacity=100);">
                    <a href="" style="background:url(images/banner.jpg) center top no-repeat"></a>
                </li>
                <li>
                    <a href="" style="background:url(images/banner1.jpg) center top no-repeat"></a>
                </li>
                <li>
                    <a href="" style="background:url(images/banner2.jpg) center top no-repeat"></a>
                </li>
                <li>
                    <a href="" style="background:url(images/banner3.jpg) center top no-repeat"></a>
                </li>
                <li>
                    <a href="" style="background:url(images/banner4.jpg) center top no-repeat"></a>
                </li>

            </ul>
        </div>
        <!--/banner-->

css:

/*banner*/
  .lubo{ 100%; min-1000px;clear: both; position: relative; height:483px; margin-top:105px;}
  .lubo_box{ position: relative; 100%; height:483px; }
  .lubo_box li{ float: left;position: absolute; top: 0; left: 0; 100%; height:483px; opacity: 0;filter:alpha(opacity=0);}
  .lubo_box li a{ display: block; 100%;  height: 100%;}
  .lubo_box li img{ 100%; height: 368px;}
  /*圆点*/
  .cir_box{ overflow: hidden; position: absolute; z-index: 100;}
  .cir_box li{ float: left; border-radius: 50%; 15px; border:3px solid #fff; height: 15px; margin:0 5px; cursor: pointer;opacity: 0.8;filter:alpha(opacity=80);}
  .cir_on{background: #fff; }
  /*按钮*/
  .lubo_btn{ position: absolute; 100%; top: 180px;}
  .left_btn, .right_btn{background: #000;opacity: 0.8;filter:alpha(opacity=80); cursor: pointer; color: #fff; line-height: 80px; font-size: 40px; font-weight: normal; text-align: center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
  .left_btn{ float: left; background: url(../images/pre.jpg) left no-repeat; 56px;height: 100px;}
  .right_btn{float: right;background: url(../images/next.png) left no-repeat; 56px;height: 100px;}
  /*/banner*/