零基础建站培训教程介绍

当前位置:

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>

相关教程

发表评论

电子邮件地址不会被公开。 必填项已用*标注

学做网站论坛零基础学建网站课程