jQuery基于SuperSlide.js制作通用的云服务器托管网站顶部导航下拉的宽屏菜单，banner图片轮播，促销推荐模块列表，页面滚动顶部始终固定导航，结合的网站顶部样式布局代码。
使用方法：
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/font-awesome.min.css" /><!--图标库-->
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
2、head引入js文件
<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/jquery.SuperSlide.2.1.3.js" type="text/javascript" charset="utf-8"></script>
3、body引入HTML代码
<div class="banner-top index">
<header class="header top-header">
<div class="topnav ">
<div class="container">
<nav class="navbar">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#" target="_blank">登录/注册</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right yhcx">
<li>
<a href="#" style="color:#FFdd00 !important"><i class="fa fa-gift hot-yhcx" style="color:#FFdd00 !important"></i>优惠促销</a>
</li>
<li>
<a href="#">会员中心</a>
</li>
<li>
<a href="#">新闻公告</a>
</li>
<li class="lang-style">
<ul class="nav navbar-nav" style="display:">
<li class="dropdown language-btn">
<span class="dropdown-toggle m-t-0 " data-toggle="dropdown">
<img src="statics/images/lang.svg" style="width:14px;margin-top:-3px"> 简体中文
<b class="caret"></b>
</span>
<ul class="dropdown-menu language-select" style="display: none;">
<b class="caret caret1"></b>
<li>
<a href="#">简体中文</a>
</li>
<li>
<a href="#">繁體中文</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 p-l-0 p-r-0">
<nav class="navbar">
<div class="navbar-header">
<a class="navbar-brand" href="#">XX科技</a>
</div>
<ul class="nav navbar-nav navbar-right account">
<li>
<a class="btn login" href="#">客服中心</a>
</li>
</ul>
<ul id="navbar" class="nav navbar-nav navbar-left">
<li class="item" _h_nav="product">
<a>产品中心</a>
</li>
<li class="item" _h_nav="plan">
<a>解决方案</a>
</li>
<li class="item" _h_nav="support">
<a>服务支持</a>
</li>
<li class="item" _h_nav="cooperation">
<a>合作共赢</a>
</li>
<li class="item" _h_nav="culture">
<a>企业文化</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="subnav">
<div class="sub-nav" _h_nav="product" id="product" style="display: none;">
<div class="container" style="padding-left: 90px;">
<div class="row">
<div class="col-sm-12">
<dl style="margin-left: -60px;">
<dt style="font-size:15px;">云虚拟主机</dt>
<dd>
<a href="#">新云主机</a><span class="hot">hot</span></dd>
<dd>
<a href="#">新云主机独享版</a>
</dd>
<dd>
<a href="#">企业主机</a>
</dd>
<dd>
<a href="#">PHP云主机</a>
</dd>
</dl>
<dl style=" width: 18%;">
<dt style="font-size:15px;">云计算服务</dt>
<div class="col-xs-6 p-l-0 p-r-0">
<dd>
<a href="#" title="云服务器">云服务器<span class="hot" style="position: absolute;right: 0px;top: 0;">hot</span></a>
</dd>
<dd>
<a href="#" title="云路由" class="cloudrouter">云路由</a>
</dd>
<dd>
<a href="#" title="BGP公网">BGP公网</a>
</dd>
</div>
<div class="col-xs-6 p-r-0" style="padding-left: 15px;">
<dd>
<a href="#" title="云硬盘">云硬盘</a>
</dd>
<dd>
<a href="#" title="私有网络" class="cloudrouter">私有网络</a>
</dd>
<dd>
<a href="#" title="高防IP">高防IP</a>
</dd>
</div>
<div class="clearfix"></div>
</dl>
<dl>
<dt style="font-size:15px;">服务器租用</dt>
<dd>
<a href="#">香港服务器</a><span class="hot">hot</span></dd>
<dd>
<a href="#">韩国服务器</a>
</dd>
<dd>
<a href="#">美国服务器</a>
</dd>
</dl>
<dl>
<dt style="font-size:15px;">高防服务器</dt>
<dd>
<a href="#" title="香港高防服务器租用">香港高防服务器</a><span class="hot">hot</span></dd>
<dd>
<a href="#" title="美国高防服务器租用">美国高防服务器</a>
</dd>
</dl>
<dl>
<dt style="font-size:15px;">专业方案</dt>
<dd>
<a href="#">服务器托管</a><span class="hot">hot</span></dd>
<dd>
<a href="#">机柜租用</a>
</dd>
<dd>
<a href="#">IP Tranist</a>
</dd>
</dl>
<dl style="margin-left: -0px;">
<dt style="font-size:15px;">域名注册</dt>
<dd>
<a href="#">域名注册</a>
</dd>
<dd>
<a href="#"> 域名转入</a>
</dd>
<dd>
<a href="#">域名管理</a>
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="sub-nav" _h_nav="plan" id="plan" style="display: none;">
<div class="container">
<dl style="margin-left:230px;">
<dd>
<a href="#">抗攻击方案</a><span class="hot">hot</span></dd>
</dl>
<dl>
<dd>
<a href="#">SSL安全证书</a>
</dd>
</dl>
<dl>
<dd>
<a href="#">企业400电话</a>
</dd>
</dl>
</div>
</div>
<div class="sub-nav" _h_nav="support" id="support" style="display: none;">
<div class="container">
<dl style="margin-left: 300px;">
<dt style="font-size:15px;">系统维护</dt>
<dd>
<a href="#">系统维护</a>
</dd>
</dl>
<dl style=" width: 25%;">
<dt style="font-size:15px;">IDC支撐</dt>
<div class="col-xs-6 p-l-0 p-r-0">
<dd>
<a href="#">Whmcs财务系统</a>
</dd>
</div>
<div class="col-xs-6 p-r-0">
<dd>
<a href="#">DirectAdmin面板</a>
</dd>
</div>
<div class="clearfix"></div>
</dl>
<dl>
<dt style="font-size:15px;">数据中心</dt>
<dd>
<a href="#">数据中心</a>
</dd>
</dl>
</div>
</div>
<div class="sub-nav" _h_nav="cooperation" id="cooperation" style="display: none;">
<div class="container">
<dl style="margin-left: 440px;">
<dd>
<a href="#">渠道代理</a> <span class="hot">new</span></dd>
</dl>
<dl>
<dd>
<a href="#">推广联盟</a>
</dd>
</dl>
<dl>
<dd>
<a href="#">合作伙伴</a>
</dd>
</dl>
</div>
</div>
<div class="sub-nav" _h_nav="culture" id="culture" style="display: none;">
<div class="container">
<dl style="margin-left: 390px;">
<dd>
<a href="#">公司介绍</a>
</dd>
</dl>
<dl>
<dd>
<a href="#">发展历程</a>
</dd>
</dl>
<dl>
<dd>
<a href="#">招贤纳士</a>
</dd>
</dl>
<dl>
<dd>
<a href="#">联系我们</a>
</dd>
</dl>
</div>
</div>
</div>
<!--banner-->
<div id="slideBox" class="slideBox">
<div class="hd">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="bd">
<ul>
<li>
<div class="item" style="background:#0028e9">
<div class="container" style="padding-top:60px">
<a href="javascript:;" target="_blank" class="buy-btn">
<img src="statics/images/index-hk-banner.png" style="width:100%;padding-top:50px">
</a>
</div>
</div>
</li>
<li>
<div class="item" style="background:#0028e9">
<div class="gaofang-banner-bg" align="center">
<div style="padding-top:60px">
<a href="javascript:;" target="_blank" class="buy-btn">
<img src="statics/images/gaofang-banner-pic1.svg" style="width:100%;padding-top:130px">
</a>
</div>
</div>
</div>
</li>
<li>
<div class="item" style="background:linear-gradient(#705eff,#0053de 81%) no-repeat;background-size: cover;background-position: center; padding-top: 120px;">
<div class="container" style="height:400px">
<a href="javascript:;" target="_blank" class="buy-btn">
<div class="banner-content col-sm-5 p-r-0 p-l-0" style="padding-top:120px;">
<p class="banner-title">
机柜租用<br><span>香港SDC数据中心</span>
</p>
<ul class="banner-slogan">
<li>T3+ 级容灾环境，高达60G BGP+CN2带宽接入</li>
<li>7*24小时技术支援，欢迎机位、电源、带宽定制配搭</li>
</ul>
<div class="free-use-btn btn-white" style="margin-top:15px;">立即选购
</div>
</div>
<div class="banner-img col-sm-7 p-l-0 p-r-0" style="text-align:right;">
<img src="statics/images/index-colo-banner.png" style="width:90%;margin-top:-30px">
</div>
</a>
<div class="clearfix"></div>
</div>
</div>
</li>
<li>
<div class="item" style="background: url(statics/images/banner-hk-english-bg.jpg) no-repeat;background-size: cover;background-position: center;padding-top: 120px;">
<div class="container">
<div class="row" style="margin-top:10px; position: relative;text-align:center ">
<a href="javascript:;" target="_blank"><img src="statics/images/banner-hk-english.png" style="width:95%;padding-top:10px;"></a>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
<a class="prev" href="javascript:void(0)">
<</a>
<a class="next" href="javascript:void(0)">></a>
</div>
</div>
<section class="index-tuijian ">
<div class="container">
<div class="col-xs-3">
<a href="#" target="_blank">
<div class="index-bq-one">
<p class="col-xs-5" style="padding-left:0;"> <img src="statics/images/1.png"> </p>
<ul class="col-xs-7 index-tui-new" style="padding-right:0;">
<li> <span style="color:#888">新用户红包 <b></b> </span>
<span><div class="new-mj">专享</div></span>
</li>
<li>注册送660元现金券</li>
</ul>
<div class="clearfix">
</div>
</div>
</a>
</div>
<a href="#" target="_blank">
</a>
<div class="col-xs-3">
<a href="#" target="_blank">
</a>
<a href="#" target="_blank">
<div class="index-bq-one">
<p class="col-xs-5" style="padding-left:0;"> <img src="statics/images/2.png" style="margin-top:-8px;"> </p>
<ul class="col-xs-7 index-tui-new" style="padding-right:0;">
<li> <span class="yhcx">香港服务器<b></b> </span></li>
<li>双向CN2+BGP极速互访</li>
</ul>
<div class="clearfix">
</div>
</div>
</a>
</div>
<div class="col-xs-3">
<a href="#" target="_blank">
<div class="index-bq-one">
<p class="col-xs-5" style="padding-left:0;"> <img src="statics/images/3.png" style="margin-top:-8px;"> </p>
<ul class="col-xs-7 index-tui-new" style="padding-right:0;">
<li> <span class="yhcx">云服务器<b></b> </span><span></span>
</li>
<li>卓越OpenStack®架构 </li>
</ul>
<div class="clearfix">
</div>
</div>
</a>
</div>
<div class="col-xs-3">
<a href="#" target="_blank">
<div class="index-bq-one">
<p class="col-xs-5" style="padding-left:0;"> <img src="statics/images/4.png" style="margin-top:-5px;"> </p>
<ul class="col-xs-7 index-tui-new" style="padding-right:0;">
<li> <span>推介赚现金 </span> <span><div class="new-mj">财富</div></span> </li>
<li>一次最高收益18000元 </li>
</ul>
<div class="clearfix">
</div>
</div>
</a>
</div>
</div>
</section>
<script src="statics/js/main.js" type="text/javascript" charset="utf-8"></script>
