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*/