图片轮播

 <div class="banner" id="lb">
        <ul>
            <li><img src="images/bg.png" alt="" width="100%" height="650" ></li>
            <li><img src="images/5.png" alt="" width="100%" height="650" ></li>
            <li><img src="images/9.png" alt="" width="100%" height="650" ></li>
        </ul>
        <a href="javascript:void(0);" class="unslider-arrow prev"><img class="arrow" id="al" src="images/arrowl.png" alt="prev" width="20" height="35"></a>
        <a href="javascript:void(0);" class="unslider-arrow next"><img class="arrow" id="ar" src="images/arrowr.png" alt="next" width="20" height="37"></a>
    </div>
    <script>
        $(document).ready(function(e) {
        var unslider = $('#lb').unslider({
        dots: true
    }),
    data = unslider.data('unslider');
    
    $('.unslider-arrow').click(function() {
        var fn = this.className.split(' ')[1];
        data[fn]();
    });
});

</script>


<style>

.dots {text-align:center;}
 .dots li.active {background:#5EB55E;}
#lb { width:100%;margin:0 auto;}
#lb .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
#lb .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;}
#lb .dots li.active {background: #fff;opacity: 1;}
#lb .arrow { position: absolute; top: 300px;}
#al { left: 15px;}
#ar { right: 15px;}
.banner { position: relative; overflow: auto;z-index:5;text-align: center;}
.banner li { list-style: none; }
.banner ul li { float: left; }

.tier{width: 100%;height: auto;overflow: hidden;background:#fff;}

smallDivList{position:relative;}
.smallDiv1,.smallDiv2{display:inline-block;margin-top: 80px;text-align:center;vertical-align:top;margin-right:100px;}
.smallDiv1{float:left;}
.smallDiv2{float:right;}
.smallDiv1 .icon{display:inline-block;width:128px;height:128px;background:url(../images/invest.png) 0 0 no-repeat;background-size:100% 100%;}
.smallDiv2 .icon{display:inline-block;width:128px;height:128px;background:url(../images/shareholder.png) 0 0 no-repeat;background-size:100% 100%;}
.smallDiv1 h3,.smallDiv2 h3{color:#5EB55E; display:inline-block;font-weight:normal;margin-top:15px;float:left;margin-left:10px;}
.smallDiv1 div{font-size: 16px;display: inline-block;text-align:left;line-height:36px;color:#7f7f7f;position:absolute;top:120px;left:180px;}
.smallDiv2 div{font-size: 16px;display: inline-block;text-align:left;line-height:36px;color:#7f7f7f;position:absolute;top:120px;right:-120px;}

</style>.tier .exp{width: 1204px;margin-left: auto;margin-right: auto;}
.tier h1{font-size:30px;text-align: center;font-weight:normal; margin-top: 100px;margin-bottom: 40px;}
.tier .p1{text-align: center;padding-top:20px;color: #959595;}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值