背景满屏的轮播jquery代码

分类:jquery实践

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>
<link href="css/gz_core-sprite.css" rel="stylesheet" type="text/css">
<script src="js/jquery-min.js" type="text/javascript"></script>
<script src="js/B.js" type="text/javascript"></script>

<style>

body,a{font:12px SimSun;color:#434343}
img{display:block}

/* tab JS */
.tab-nested{display:none}
/* gz_ban */
#gz_ban{width:100%}
.gz_ban .ban1{min-width:980px;height:377px;background:#181310 url(images/new/ban_1.jpg) no-repeat center top}
/* gz_ban */
#gz_ban{width:100%;height:377px}
#gz_ban ul{list-style:none}
#gz_ban .banC{position:relative;z-index:8;min-width:980px;height:377px;margin:auto;overflow:hidden;}
#gz_ban .banC .ul_img{position:absolute;top:0;left:0;height:377px;width:100%;overflow:hidden}
#gz_ban .banC .ul_img li{position:absolute;top:0;left:0;vertical-align:bottom;width:100%;height:377px}
#gz_ban .banC .ul_img .current{opacity:1;filter:alpha(opacity=100);}
#gz_ban .banC .ul_img li a{display:block;width:100%;height:377px}

#gz_ban .banC .ul_img li .ban_1{background:url(images/ban_1.jpg) no-repeat center top}
#gz_ban .banC .ul_img li .ban_2{background:url(images/ban_2.jpg) no-repeat center top}
#gz_ban .banC .ul_img li .ban_3{background:url(images/ban_3.jpg) no-repeat center top}
#gz_ban .banC .ul_img li .ban_4{background:url(images/ban_4.jpg) no-repeat center top}
#gz_ban .banC .ul_img li .ban_5{background:url(images/ban_5.jpg) no-repeat center top}
#gz_ban .banC .ul_img li .ban_6{background:url(images/ban_6.jpg) no-repeat center top}
#gz_ban .banC .ul_img li .ban_fqj{background:url(images/ban_fqj.jpg) no-repeat center top}
#gz_ban .banC .ul_img li .ban_jxj{background:url(images/ban_jxj.jpg) no-repeat center top}
#gz_ban .banC .ul_img li .ban_lf{background:url(images/ban_lf.jpg) no-repeat center top}
#gz_ban .banC .ul_img li .ban_xz{background:url(images/ban_xz.jpg) no-repeat center top}
#gz_ban .banC .ul_img li .ban_fx{background:url(images/ban_fx.jpg) no-repeat center top}
#gz_ban .banC .ul_img li .ban_aqsm{background:url(images/ban_aqsm.jpg) no-repeat center top}
#gz_ban .banC .ul_img li .ban_smj{background:url(images/ban_smj.jpg) no-repeat center top}
#gz_ban .banC .ul_img li .ban_15{background:url(images/ban_15.jpg) no-repeat center top}

#gz_ban .banC .b_np{position:absolute;top:150px;z-index:99;display:block;width:40px;height:80px;line-height:80px;color:#fff;text-align:center;font-size:70px}
#gz_ban .banC #ban_prev{left:50%;margin-left:-500px}
#gz_ban .banC #ban_next{right:50%;margin-right:-500px}

#gz_ban .banC .tab_round{position:absolute;z-index:99;bottom:20px;left:50%;margin-left:-480px}
#gz_ban .banC .tab_round li{float:left;width:12px;height:12px;padding-right:10px;vertical-align:bottom}

#gz_ban .banC .tab_round li a{
display:block;
width:12px;
height:12px;
  background-image: url('images/sprite-public.png');
  background-position: left -162px;
_background:url(images/roundoff_ie6.gif) no-repeat 0 0;
}
#gz_ban .banC .tab_round .on_round a{
  background-image: url('images/sprite-public.png');
  background-position: left -174px;
_background:url(images/round_ie6.gif) no-repeat 0 0
}

</style>
</head>

<body>
<!-- gz_ban start -->
<!-- gz_ban start -->
	<div id="gz_ban" class="gz_ban">
		<div class="banC" id="banC">
			<ul class="ul_img">
				<li><a class="ban_1" href="/jingcaizhuanti/pinpai.html" target="_blank"></a></li>					
				<li><a class="ban_2" href="/jingcaizhuanti/xytshd.html" target="_blank"></a></li>	
                                <li><a class="ban_fx" href="/jingcaizhuanti/dgfengxiong.html" target="_blank"></a></li>	
                                <li><a class="ban_xz" href="/jingcaizhuanti/duoweixizhi.html" target="_blank"></a></li>		
				<!--<li><a class="ban_jxj" href="/meilaidongtai/4576.html" target="_blank"></a></li>-->
                                <li><a class="ban_lf" href="/jingcaizhuanti/lifeng.html" target="_blank"></a></li>
			</ul>
                           <ul class="tab_round">
			<li class="on_round"><a class="round_a" href="javascript:void(0)"></a></li>
			<li class=""><a class="round_a" href="javascript:void(0)"></a></li>	
                        <li class=""><a class="round_a" href="javascript:void(0)"></a></li>	
                        <li class=""><a class="round_a" href="javascript:void(0)"></a></li>	
                        <li class=""><a class="round_a" href="javascript:void(0)"></a></li>		
                       	
			</ul> 
			<a id="ban_next" class="b_np" href="javascript:void(0)">&gt;</a>
			<a id="ban_prev" class="b_np" href="javascript:void(0)">&lt;</a>
		</div>
	</div>
	
	<!-- gz_ban end -->

</body>
</html>

 

 非常实用的代码,兼容性强,值得收藏的jquery轮播代码

演示地址:http://www.endbus.cn/demo/jquery/tu

本文链接: 背景满屏的轮播jquery代码
版权所有:布士收藏夹在网络收集,如有侵犯你的权利, 请联系QQ:641868752。

评论

发表评论

*

* (显示gravatar头像)

Ctrl+Enter快捷回复

© 2014 布士收藏夹 all rights reserved.