jquery顶部导航菜单和图片轮播布局代码
导航菜单 次 2018-07-09jQuery打造顶级导航菜单，结合精美图片轮播，布局优雅且功能强大。我们的导航菜单设计简洁易用，只需一行代码即可轻松集成，为您的网站增添专业风范，提升用户体验。
jquery 实现顶部固定浮动导航下拉二级菜单，和宽屏的图片轮播布局效果代码，适用于网站主要结构布局，下载即可使用。
[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程
使用方法：
1、head引入css文件
<link href="css/style.css" rel="stylesheet" type="text/css"/>
2、head引入js文件
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
3、body引入HTML代码
<div class="aui-header-top">
<div class="aui-header-title">
<div class="aui-title">
<a href="#">云服务</a>
</div>
<ul class="navList">
<li>
<a href="#">云计算基础服务</a>
</li>
<li>
<a href="#">云安全计算服务</a>
</li>
<li>
<a href="#">通信与视频</a>
</li>
<li>
<a href="#">云计算服务</a>
</li>
</ul>
</div>
</div>
<div class="aui-header-nav moveDown">
<div class="wrapper">
<a href="#">
<div class="aui-logo">
<h1>首页</h1>
</div>
</a>
<div class="aui-top-nav">
<ul class="menu">
<li class="product">
<a href="#">
产品
<span class="u-icon-caret"></span>
</a>
<div class="panel product">
<div class="inner">
<dl class="list">
<dt>客户服务云: </dt>
<dd>
<a href="#">
<i class="icon-font icon-font-item001"></i>
<em class="txt">在线客服</em>
</a>
</dd>
<dd>
<a href="#">
<i class="icon-font icon-font-item002"></i>
<em class="txt">机器人</em>
</a>
</dd>
<dd>
<a href="#">
<i class="icon-font icon-font-item003"></i>
<em class="txt">呼叫中心</em>
</a>
</dd>
<dd>
<a href="#">
<i class="icon-font icon-font-item004"></i>
<em class="txt">工单系统</em>
</a>
</dd>
</dl>
<dl class="list">
<dt>营销服务云: </dt>
<dd>
<a href="#">
<i class="icon-font icon-font-item005"></i>
<em class="txt">营销服务</em>
</a>
</dd>
</dl>
<dl class="list">
<dt>场景支持: </dt>
<dd>
<a href="#">
<i class="icon-font icon-font-item006"></i>
<em class="txt">移动办公</em>
</a>
</dd>
<dd>
<a href="#">
<i class="icon-font icon-font-item007"></i>
<em class="txt">微信客服</em>
</a>
</dd>
</dl>
</div>
</div>
</li>
<li class="finance">
<a href="#">
解决方案
<span class="u-icon-caret"></span>
</a>
<div class="panel finance">
<div class="inner">
<dl class="list">
<dd style="margin-left: -405px;">
<a href="#">
<i class="icon-font icon-font-item001"></i>
<em class="txt">互金解决方案</em>
</a>
</dd>
</dl>
</div>
</div>
</li>
<li>
<a href="#">案例
</a>
</li>
<li class="price">
<a href="#">
价格
<span class="u-icon-caret"></span>
</a>
</li>
<li class="service">
<a href="#">服务
</a>
</li>
<li class="merchants">
<a href="#">渠道合作
</a>
</li>
<li class="college">
<a href="#">轻学院
</a>
</li>
<li class="qa">
<a href="#">
帮助
<span class="u-icon-caret"></span>
</a>
<div class="panel qa">
<div class="inner">
<dl class="list">
<dd>
<a href="#">
<i class="icon-font icon-font-item002"></i>
<em class="txt">帮助中心</em>
</a>
</dd>
<dd>
<a href="#">
<i class="icon-font icon-font-item003"></i>
<em class="txt">下载</em>
</a>
</dd>
<dd>
<a href="#">
<i class="icon-font icon-font-item004"></i>
<em class="txt">更新日志</em>
</a>
</dd>
<dd>
<a href="#">
<i class="icon-font icon-font-item005"></i>
<em class="txt">开发指南</em>
</a>
</dd>
</dl>
</div>
</div>
</li>
<li class="community">
<a href="#">博客</a>
</li>
</ul>
</div>
<div class="m-login">
<a href="#" class="u-btn sign">登录</a>
<a href="#" class="u-btn free">免费试用</a>
</div>
</div>
</div>
<div class="aui-banner-slide">
<div class="aui-banner-main">
<div class="aui-banner-wrapper bd">
<ul>
<li>
<img src="images/banner001.png" alt="">
<div class="aui-banner-button">
<a href="#">立即试用</a>
</div>
</li>
<li>
<img src="images/banner002.png" alt="">
<div class="aui-banner-button">
<a href="#">立即试用</a>
<a href="#" class="aui-btn-wh">了解详情</a>
</div>
</li>
<li>
<img src="images/banner003.png" alt="">
<div class="aui-banner-button">
<a href="#">立即成为代理</a>
</div>
</li>
<li>
<img src="images/banner004.png" alt="">
<div class="aui-banner-button aui-banner-button-mo">
<a href="#">成为合伙人</a>
</div>
</li>
</ul>
</div>
<div class="hd aui-banner-circle">
<ul>
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="aui-banner-news">
<div class="aui-banner-news-box">
<ul>
<li>
<a href="#">
<div class="aui-bar-pic">
<img src="images/icon-bar001.png" alt="">
</div>
<div class="aui-bar-head">
<p class="aui-bar-title">网易七鱼发布全新品牌视频</p>
<p class="aui-bar-text">从服务抵达智慧营销未来</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="aui-bar-pic">
<img src="images/icon-bar002.png" alt="">
</div>
<div class="aui-bar-head">
<p class="aui-bar-title">营销服务云</p>
<p class="aui-bar-text">助力企业营销，促进客户转化</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="aui-bar-pic">
<img src="images/icon-bar003.png" alt="">
</div>
<div class="aui-bar-head">
<p class="aui-bar-title">智能客服机器人</p>
<p class="aui-bar-text">千亿级消息训练，97%应答准确率</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div style="height:1200px;"></div><!-- 可删除 -->
<script type="text/javascript">
jQuery(".aui-banner-main").slide({
mainCell: ".bd ul",
effect: "left",
autoPlay: true,
trigger: "click",
delayTime: 700
});
$(window).on('scroll', function() {
if ($(document).scrollTop() > 10) {
$('.aui-header-nav').addClass('solid').removeClass('moveDown');
$('.aui-header-top').addClass('moveUp');
} else {
$('.aui-header-nav').removeClass('solid').addClass('moveDown');
$('.aui-header-top').removeClass('moveUp');
}
});
</script>
文件目录
本资源来自：代码 » 导航菜单 » jquery顶部导航菜单和图片轮播布局代码
注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！
jQuery css3线性流体文字导航动画特效
« 上一篇
2018年07月07日
jquery实现顶部固定导航下拉菜单代码
下一篇 »
2018年07月05日
1、如非特殊说明，本站对本文提供的代码或者素材不拥有任何权利，其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
