零基礎建站培訓教程介紹

當前位置:

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>

發表評論

電子郵件地址不會被公開。 必填項已用*標注

相關教程

學做網站論壇零基礎學建網站課程
新疆25选7基本走势图