html+css
<!--轮播图 banner--> | |
<div id="banner" style="background: url(/templets/4hlcn/images/banner/banner-1.png) center top no-repeat;"> | |
<a href="#" > | |
</a> | |
<div class="content"><a href="javascript:;&fi=48067" > | |
<div class="title"></div> | |
<div class="advantage"> | |
<img src="/templets/4hlcn/images/banner/banner-09.png"> | |
<ul> | |
<li><span id="l_satisfaction">99.1</span>%</li> | |
<li class="li1"><span id="l_year">8</span>年</li> | |
<li class="li2"><span id="l_problem">1000</span>名</li> | |
<li class="li3"><span id="l_loss">31</span>家</li> | |
<li class="li4"><span id="l_case">9000</span>+</li> | |
</ul> | |
</div></a> | |
<div class="banner_but"> | |
<ul id="bann_tr_list"> | |
<li onclick="tr_banner(1)" class=""></li> | |
<li onclick="tr_banner(2)" class=""></li> | |
<li onclick="tr_banner(3)" class=""></li> | |
<li onclick="tr_banner(4)" class=""></li> | |
<li onclick="tr_banner(5)" class="li1"></li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
<script> | |
//轮播图样式 | |
var tr_i=1; | |
function tr_banner(id){ | |
tr_i=id; | |
$('#bann_tr_list li').removeClass('li1'); | |
$('#bann_tr_list li').eq(tr_i-1).addClass('li1'); | |
$('#banner').css('background','url(/templets/4hlcn/images/banner/banner-'+tr_i+'.png) no-repeat center top'); | |
} | |
var l_t_banner= setInterval("tr_banner_t()",6000); | |
tr_i>=6000&&clearInterval(l_t_banner); | |
function tr_banner_t(){ | |
tr_i++; | |
if(tr_i>5){ | |
tr_i=1; | |
} | |
$('#bann_tr_list li').removeClass('li1'); | |
$('#bann_tr_list li').eq(tr_i-1).addClass('li1'); | |
$('#banner').css('background','url(/templets/4hlcn/images/banner/banner-'+tr_i+'.png) no-repeat center top'); | |
} | |
var year_i=1; | |
function l_year(){ | |
if(year_i>=8){ | |
year_i=8; | |
} | |
$('#l_year').text(year_i); | |
year_i++; | |
} | |
var l_yea= setInterval("l_year()",272); | |
year_i>=8&&clearInterval("l_yea"); | |
var problem_i=1; | |
function l_problem(){ | |
if(problem_i>=1000){ | |
problem_i=1000; | |
} | |
$('#l_problem').text(problem_i); | |
problem_i+=10; | |
} | |
var l_proble= setInterval("l_problem()",13); | |
problem_i>=1000&&clearInterval("l_proble"); | |
var satisfaction_i=1; | |
function l_satisfaction(){ | |
if(satisfaction_i>=99){ | |
satisfaction_i=99.1; | |
} | |
$('#l_satisfaction').text(satisfaction_i); | |
satisfaction_i++; | |
} | |
var l_satisfactio= setInterval("l_satisfaction()",30); | |
satisfaction_i>=99.1&&clearInterval("l_satisfactio"); | |
var loss_i=1; | |
function l_los(){ | |
if(loss_i>=31){ | |
loss_i=31; | |
} | |
$('#l_loss').text(loss_i); | |
loss_i++; | |
} | |
var l_loss= setInterval("l_los()",7.5); | |
loss_i>=99.1&&clearInterval("l_loss"); | |
var case_i=1; | |
function l_cas(){ | |
if(case_i>=9000){ | |
case_i=9000; | |
} | |
$('#l_case').text(case_i); | |
case_i+=10; | |
} | |
var case_i= setInterval("l_cas()",5); | |
loss_i>=9000&&clearInterval("case_i"); | |
</script> |
css
/*轮播图*/
#banner{ width:100%; height:800px;background:url(../images/banner/banner-1.png) no-repeat center top;}
#banner .content{ width:1200px; margin:0 auto;}
#banner .content .title{ text-align:center;height:20px;}
#banner .content .advantage{ position:relative; margin-top:590px;}
#banner .content .advantage img{ width:100%;}
#banner .content .advantage ul{ position:absolute; top:16px; left:236px;}
#banner .content .advantage ul li{ float:left; font-size:20px; color:#a30202; font-family:'微软雅黑'; width:120px;}
#banner .content .advantage ul .li1{ margin-left:75px;}
#banner .content .advantage ul .li2{ margin-left:85px;}
#banner .content .advantage ul .li3{ margin-left:85px;}
#banner .content .advantage ul .li4{ margin-left:85px;}
#banner .content .advantage ul li span{font-size:40px; font-weight:800;}
#banner .content .banner_but{text-align:center; margin-top:14px;}
#banner .content .banner_but ul{ display:inline-block;}
#banner .content .banner_but ul li{ width:12px; height:12px; border-radius:50%; margin-right:12px; background:#c5c5c4;float:left; cursor: pointer;}
#banner .content .banner_but ul .li1{background:rgb(183, 125, 0);}
效果图
可查看 http://www.sxqylawyer.cn/index.html 官网首页