jQuery制作橙色大气的网络科技公司网站头部布局，宽屏的下拉导航菜单图标，大屏的banner轮播图片，页面滚动导航固定在顶部效果代码。ps：代码内有清晰的注释，每个部位都有注释说明。
使用方法：
1、head引入css文件
<!--主要样式-->
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
<!--动画库-->
<link rel="stylesheet" type="text/css" href="statics/css/anim.css" />
2、head引入js文件
<script src="statics/js/jquery-1.11.0.js"></script>
<script src="statics/js/jquery.SuperSlide.2.1.1.js"></script>
<script src="statics/js/jquery.ckSlide.js"></script>
<script src="statics/js/waypoints.min.js"></script>
3、body引入HTML代码
<div class="holer"></div>
<div id="headdiv">
<div class="top01">
<div class="gy2">
<span class="l">欢迎您光临深圳市网络科技有限公司！</span>
<div class="top01_center">
<img src="statics/images/top_tel_icon.png" width="18" height="18"> 全国热线：xxxx-xxxx 深圳：0755-xxxxxxxxx
</div>
</div>
</div>
<div class="top02">
<div class="top02_center">
<div class="logo">
<a href="#"><img src="statics/images/logo.png" width="180" height="60"></a>
<div>
<div class="logo-year">10年</div>
<div class="logo-text">专注网站建设行业优质供应商</div>
</div>
</div>
<!-- 导航 -->
<div class="nav">
<ul>
<li id="m1" class="m on">
<a href="#" class="aa1 mmm" id="sel">首页</a>
</li>
<li id="m3" class="m">
<a href="#" class="aa3 mmm">网站建设</a>
<div class="sub">
<div class="nav_xiao">
<div class="xiao_one">
<ul>
<li>
<a href="#"><i class="bgs1"></i>企业营销型网站建设</a>
</li>
<li>
<a href="#"><i class="bgs2"></i>创意品牌型网站建设</a>
</li>
<li>
<a href="#"><i class="bgs3"></i>购物商城型网站建设</a>
</li>
<li>
<a href="#"><i class="bgs4"></i>手机微信网站建设</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li id="m6" class="m">
<a href="#" class="aa6 mmm">产品服务</a>
<div class="sub">
<div class="nav_xiao">
<div class="xiao_six">
<ul>
<li class="bgs1">
<div class="xiao_six_con">
<h2 class="xiao_six_l">网站建设</h2>
<a href="#">- 企业营销</a>
<a href="#">- 响应式网站</a>
<a href="#">- 创意品牌</a>
<a href="#">- 营销型网站建设</a>
<a href="#">- 购物商城</a>
<a href="#">- 网站改版</a>
<a href="#">- 手机微信</a>
<a href="#" class="a bgs1">建站免费报价</a>
</div>
</li>
<li class="bgs2">
<div class="xiao_six_con">
<h2 class="xiao_six_l">移动业务</h2>
<a href="#">- 手机网站</a>
<a href="#">- O2O电商</a>
<a href="#">- 微信商城</a>
<a href="#">- 小程序</a>
<a href="#">- 微信分销</a>
<a href="#" class="a bgs2">手机网站设计</a>
</div>
</li>
<li class="bgs3">
<div class="xiao_six_con">
<h2 class="xiao_six_l">基础业务</h2>
<a href="#">- 域名注册</a>
<a href="#">- 虚拟主机</a>
<a href="#">- 企业邮箱</a>
<a href="#" class="a bgs3">在线咨询</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li id="m4" class="m">
<a href="#" class="aa4 mmm">成功案例</a>
<div class="sub">
<div class="nav_xiao max1100">
<div class="xiao_five">
<img src="statics/images/cr_img1.png">
</div>
<div class="xiao_five2">
<p>
<a href="#"><i class="bgs1"></i>- 企业营销</a>
<a href="#"><i class="bgs2"></i>- 移动应用</a>
</p>
<p>
<a href="#"><i class="bgs3"></i>- 购物商城</a>
<a href="#"><i class="bgs4"></i>- 外贸网站</a>
</p>
<p>
<a href="#"><i class="bgs5"></i>- 行业门户</a>
<a href="#"><i class="bgs6"></i>- 创意品牌</a>
</p>
</div>
</div>
</div>
</li>
<li id="m8" class="m">
<a href="#" class="aa8 mmm">解决方案</a>
<div class="sub">
<div class="nav_xiao">
<div class="xiao_four l">
<h2>解决方案</h2>
<ul class="ul">
<li>
<a href="#"><i class="bgs1"></i><b>企业网站建设解决方案</b>更贴身、易落地、高性价比</a>
</li>
<li>
<a href="#"><i class="bgs2"></i><b>营销型网站建设解决方案</b>可精准流量统计与效果分析</a>
</li>
<li>
<a href="#"><i class="bgs3"></i><b>行业门户网站建设解决方案</b>能及时、准确、动态地更新</a>
</li>
<li>
<a href="#"><i class="bgs4"></i><b>外贸网站解建设决方案</b>视觉、功能系统，展示产品</a>
</li>
<li>
<a href="#"><i class="bgs5"></i><b>品牌形象网站建设解决方案</b>操作方便、结构先进的优点</a>
</li>
<li>
<a href="#"><i class="bgs6"></i><b>购物商城网站建设解决方案</b>方便快捷购物车、购物指南</a>
</li>
<li>
<a href="#"><i class="bgs7"></i><b>政府网站建设解决方案</b>可轻松定制风格各异、频道</a>
</li>
<li>
<a href="#"><i class="bgs8"></i><b>手机网站建设解决方案</b>可隐藏、访问限制、可管理</a>
</li>
</ul>
</div>
<div class="xiao_four r">
<div class="ul2">
<h2>我们的产品</h2>
<ul>
<li>
<a href="#"><b>企业营销型网站建设</b>注重网站优化SEO结构</a>
</li>
<li>
<a href="#"><b>微信电商<i></i></b>便捷、高效、开放、一站式管理</a>
</li>
<li>
<a href="#"><b>购物商城型网站建设<i></i></b>量身定制,以销售产品为目标</a>
</li>
<li>
<a href="#"><b>微信分销</b>分销分佣，更广阔的业务前景</a>
</li>
<li>
<a href="#"><b>创意品牌型网站建设</b>适合注重美工形象的客户</a>
</li>
<li>
<a href="#"><b>B2B2C电商</b>经营模式支撑，招商、全支持</a>
</li>
<li>
<a href="#"><b>手机微信网站建设</b>随时、随地、随身访问的优势</a>
</li>
<li>
<a href="#"><b>O2O电商</b>全方位流量平台支持</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li id="m5" class="m">
<a href="#" class="aa5 mmm">新闻动态</a>
<div class="sub">
<div class="nav_xiao">
<div class="xiao_three">
<ul>
<li>
<a href="#"><img src="statics/images/nav_news.jpg">最新签约</a>
</li>
<li>
<a href="#"><img src="statics/images/nav_news5.jpg">公司新闻</a>
</li>
<li>
<a href="#"><img src="statics/images/nav_news2.jpg">网站优化</a>
</li>
<li>
<a href="#"><img src="statics/images/nav_news3.jpg">建站知识</a>
</li>
<li>
<a href="#"><img src="statics/images/nav_news4.jpg">行业资讯</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li id="m2" class="m">
<a href="#" class="aa2 mmm">关于我们</a>
<div class="sub">
<div class="nav_xiao">
<div class="xiao_two">
<ul>
<li>
<a href="#"><i class="bgs1"></i>公司介绍</a>
</li>
<li>
<a href="#"><i class="bgs2"></i>汇款方式</a>
</li>
<li>
<a href="#"><i class="bgs3"></i>公司团队</a>
</li>
<li>
<a href="#"><i class="bgs4"></i>发展历程</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li id="m7" class="m">
<a href="#" class="aa7 mmm">联系我们</a>
</li>
</ul>
</div>
<!-- 导航 end -->
</div>
</div>
</div>
<!--slider-->
<div class="fuSlide ck-slide imgs rel">
<ul class="ck-slide-wrapper">
<li class="li6" style="background-image: url(statics/images/banner.jpg); "> <img src="statics/images/banner.jpg" style="display:none;" class="img">
<div class="banner_con">
<div class="f48 banner1_one leftto">
<h2 class="f90">十年高端网站设计经验</h2>网络 . 您身边的网站建设专家
</div>
<div class="banner1_two anim-1">
<span class="f30">集团客户<b class="f72">200+</b></span>
<span class="f30">企业客户<b class="f72">5000+</b></span>
</div>
</div>
</li>
<li class="li5" style="background-image: url(statics/images/banner2.jpg); "> <img src="statics/images/banner2.jpg" class="img">
<div class="banner_con">
<div class="gy2">
<div class="banner2_one">
<h2 class="f72 anim-1">全网覆盖 四网合一</h2>
<p class="f36 anim-2">完美兼容PC、手机、微信、IPad全终端给您良好的浏览体验。</p>
</div>
</div>
</div>
</li>
<li class="li1" style="background-image: url(statics/images/banner3.jpg); ">
<a href="#"><img src="statics/images/banner3.jpg" class="img">
<div class="banner_con">
<div class="gy2">
<div class="banner2_one">
<h2 class="f72 anim-1">精雕细琢 再鉴真品</h2>
<p class="f36 anim-2">我们一次又一次的蜕变，只为陪您走的更远</p>
<em class="leftto">查看案例</em>
</div>
</div>
</div>
</a>
</li>
<li class="li2 current" style="background-image: url(statics/images/banner4.jpg);"> <img src="statics/images/banner4.jpg" class="img">
<div class="banner_con">
<div class="gy2">
<div class="banner4_one">
<h2 class="f72 anim-1">10年持续追求更高品质</h2>
<p class="f30 anim-2">专注于提供高端定制互联网应用服务，让我们的服务<br>帮助您的品牌更有效率的传播！ </p>
</div>
</div>
</div>
</li>
</ul>
<div class="index-waper-box">
<div class="index-back-box digital">
<div class="sub-arrows bx-controls-direction">
<i class="icom prev bx-prev ck-prev"></i>
<i class="icom next bx-next ck-next"></i> </div>
<div class="sub-mouse">
<span><img src="statics/images/sub-mouse.png" ></span> </div>
</div>
</div>
</div>
<!--slider end-->
<!--优势begin-->
<div class="i_bg">
<div class="gy2 i_one">
<div class="i_service_t anim anim-1 anim-show">
<h2>优势之道·素谓天成</h2>
<p>用心、用责、 用情、人无我有、人优我特；敬天惜福，爱人有度。</p>
</div>
<div class="priorities">
<div class="advantage">
<div class="num_box anim anim-1 anim-show">
<div class="num" data-num="10">10</div>
<h3>10年高端网站设计经验</h3>
</div>
<div class="num_box anim anim-2 anim-show">
<div class="num" data-num="28">28+</div>
<h3>28+政府单位的认可</h3>
</div>
<div class="num_box anim anim-3 anim-show">
<div class="num" data-num="56">56+</div>
<h3>56+上市公司的选择</h3>
</div>
<div class="num_box anim anim-4 anim-show">
<div class="num" data-num="800">800+</div>
<h3>800+品牌客户的选择</h3>
</div>
<div class="num_box anim anim-5 anim-show">
<div class="num" data-num="5000">5000+</div>
<h3>5000+企业客户的选择</h3>
</div>
</div>
</div>
</div>
</div>
<!--优势end-->
<script src="statics/js/main.js">//主要逻辑代码</script>
