轮播焦点图
Posted 简单就好zyx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播焦点图相关的知识，希望对你有一定的参考价值。
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{ width: 100%; min-width:1000px;clear: both; position: relative; height:483px; margin-top:105px;}
.lubo_box{ position: relative; width: 100%; height:483px; }
.lubo_box li{ float: left;position: absolute; top: 0; left: 0; width: 100%; height:483px; opacity: 0;filter:alpha(opacity=0);}
.lubo_box li a{ display: block;width: 100%; height: 100%;}
.lubo_box li img{ width: 100%; height: 368px;}
/*圆点*/
.cir_box{ overflow: hidden; position: absolute; z-index: 100;}
.cir_box li{ float: left; border-radius: 50%; width: 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; width: 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; width: 56px;height: 100px;}
.right_btn{float: right;background: url(../images/next.png) left no-repeat;width: 56px;height: 100px;}
/*/banner*/
以上是关于轮播焦点图的主要内容，如果未能解决你的问题，请参考以下文章