JQUERY全屏上下切换式Banner轮播图代码
这是一款全屏高宽度上下切换式Banner轮播图，适用于任意网站制作，兼容性强。整体看起来大气上档次，并且带有手动上下点击切换的功能，可以让用户根据自己需要点击切换图片，是我们自己做网站时不可多得的一款Banner轮播图。
HTML代码
<!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=UTF-8">
<title>Banner轮播图</title>
<meta name="description" content="Banner轮播图">
<link href="banner1_data/fullfoucs.css" rel="stylesheet">
<script src="banner1_data/jquery-1.js" type="text/javascript"></script>
<script src="banner1_data/jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="flash_control" style="top: 222px;">
<div class="flash-control-wrp">
<a class="icon-up"><i></i></a>
<a class="icon-play"><i></i></a>
<a class="icon-pause"><i></i></a>
<a class="icon-down"><i></i></a>
</div>
</div>
<ol id="index_ex_slide" class="flash">
<li class="default" style="top: -600px; height: 600px; width: 1519px;">
<a href="#" target="_blank"><img class="lazy default" src="banner1_data/jsq01.jpg" alt="Banner轮播图"></a></li>
<li style="top: 0px; height: 600px; width: 1519px;"><a href="#" target="_blank"><img class="lazy" src="banner1_data/3.jpg" alt="Banner轮播图"></a></li>
<li style="top: 600px; height: 600px; width: 1519px;"><a href="#" target="_blank"><img class="lazy" src="banner1_data/xinnian.jpg" alt="Banner轮播图"></a></li>
<li style="top: 1200px; height: 600px; width: 1519px;"><a href="#" target="_blank"><img class="lazy" src="banner1_data/1.jpg" alt="Banner轮播图"></a></li>
</ol>
<script type="text/javascript">
$.fullFoucs({
direction: 'up'
});
</script>
</body></html>
CSS代码
@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* 当前页html body样式 */
*html,*html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
html, body{overflow:hidden;min-width:989px;min-height:700px;}
body{position:relative;z-index:1;}
/* flash_control */
#flash_control .icon-up i,#flash_control .icon-up i:hover,
#flash_control .icon-play i,#flash_control .icon-play i:hover,
#flash_control .icon-pause i,#flash_control .icon-pause i:hover,
#flash_control .icon-down i, #flash_control .icon-down i:hover{background:url(../icon-s.png) no-repeat;}
#flash_control{position:fixed;z-index:900;width:51px;top:-9999em;right:3em;}
*html #flash_control{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
#flash_control a{cursor:pointer;display:block;margin-bottom:1px;*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#99000000', endColorstr='#99000000');background:transparent;background:rgba(0,0,0,.6);}
#flash_control a i{display:block;height:100%;width:100%;}
#flash_control .icon-up, #flash_control .icon-down{visibility:hidden;}
#flash_control .icon-up i{background-position:-415px 16px;height:51px;width:51px;}
#flash_control .icon-up i:hover{background-position:-232px 16px;height:51px;width:51px;}
#flash_control .icon-play i{background-position:-354px 16px;height:51px;width:51px;display:none;}
#flash_control .icon-play i:hover{background-position:-171px 16px;height:51px;width:51px;}
#flash_control .icon-pause i{background-position:-293px 16px;height:51px;width:51px;}
#flash_control .icon-pause i:hover{background-position:-110px 16px;height:51px;width:51px;}
#flash_control .icon-down i{background-position:12px 16px;height:51px;width:51px;}
#flash_control .icon-down i:hover{background-position:-49px 16px;height:51px;width:51px;}
#flash_control .on .icon-up, #flash_control .on .icon-down{visibility:visible;}
#flash_control .on .icon-play i{display:block;}
#flash_control .on .icon-pause i{display:none;}
.flash li{position:absolute;overflow:hidden;z-index:601;left:0;}
.flash .default{z-index:605;}
.flash img{width:100%;height:100%;}
JQUERY代码
<script type="text/javascript">
$.fullFoucs({
direction: 'up'
});
</script>
通过以上三段代码就可以实现全屏高宽度上下切换式Banner轮播图了。
为了方便学建网站新手使用，我们将这款Banner轮播图代码进行了打包供下载，下载地址：链接: https://pan.baidu.com/s/1sDCuLM-h2kmhmDoPGqEacQ 提取码: u8nf
将代码压缩包下载解压，然后上传到自己的网站主题文件夹里，使用以下的代码进行调用，可以放在任意位置。
<div id="container" style="overflow:hidden;">
<iframe border="0" id="content" src="<?php echo get_template_directory_uri(); ?>/images/banner1.html" style="height:600PX;" width="100%" height="100%" frameborder="0"></iframe>
</div>
