利用jQuery实现左右轮播样式

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 οnclick="tr_banner(1)" class=""></li>
	<li οnclick="tr_banner(2)" class=""></li>
	<li οnclick="tr_banner(3)" class=""></li>
	<li οnclick="tr_banner(4)" class=""></li>
	<li οnclick="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 官网首页