QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > jquery顶部导航菜单和图片轮播布局代码

原创商用 jquery顶部导航菜单和图片轮播布局代码

jquery 实现顶部固定浮动导航下拉二级菜单,和宽屏的图片轮播布局效果代码,适用于网站主要结构布局,下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

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>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
百盈PK10 全民汇彩票www.52303w.com| www.38516.cc-get彩民发宝| www.779592.com-两亿彩票网登录| www.080908.com-魔方彩票真假问题| www.559279.com-大家乐彩票-| www.889253.com-七乐彩下载-| www.cai7133.com快三江苏开奖走势图| www.1009.in-高频快开彩票游戏| www.58967.cc-福彩排列三预测| www.029127.com-彩票对压怎么玩| www.166270.com-快三走势图河北| www.319762.com-网易彩票3d走势图| www.470063.com-网络足彩违法吗| www.721009.com-彩票七乐彩2元网| www.867798.com-兼职彩票游戏代打| www.974018.com-浪琴一天快三秒| www.av20.com-江苏快三代理| www.850759.com-体育彩票号码机选| 彩天下www.196016.com| www.qv57.com-福彩三天-| www.16ad.com-体彩序列号-| www.4501.com-体彩19040期| www.tf79.com-826彩票平台| www.310635.com-云南省体彩中心地址| www.512719.com-水溶彩铅画花卉图片| www.650126.com-彩虹伞玩法小班介绍| www.848911.com-老时时彩开奖宝典| www.20303.cc-四川福彩双色球开奖| www.95698.com-体育彩票哪年上市| www.145715.com-玩彩票大平台可靠吗| www.275398.com-彩票在线计划| www.473702.com-福利彩票前面中3个| www.693641.com-105彩票登录| 名门彩www.33997a.com| www.818272.com-腾讯分分彩开奖号| www.969511.com-福彩3d跨度判断| www.27eh.com-哈尔滨体彩店出兑| www.33344.cc-山东烟台快三| www.941727.com-世界最大的彩票中奖| www.35175.com-极速快三查询| www.873546.com-网易彩票网网址| www.cz40.com-彩神团队是真的吗| www.8bf.cc-国外算彩票的数学家| www.737612.com-福彩3分析app| www.973814.com-彩票预测3b-| www.53fr.com-福利彩票市场管理员| www.302.press-港彩正版资料第一份| www.54654.com-2019彩金大全| www.057969.com-体育彩票提成怎么算| www.572886.com-福彩61生肖玩法| www.656917.com-彩贝游戏平台| www.764828.com-中国体彩官网手机版| www.885412.com-彩票一购彩大厅| www.991045.com-安微快三和值走势| www.rj13.com-广西快三综合走势| www.46wo.com-广西投资指南彩报| www.20424.com-福利彩票线上选号| www.404813.com-19040七星彩| www.015372.com-百盈快三计划江苏| www.lo72.com-哪些彩票是官方的| www.779479.com-竞彩预测网易| www.o18.com-玩彩网app-| www.8555.cm-超级七星彩规律表| www.98760.com-360彩票竞彩足球| www.611099.com-彩票38-| www.1827.cn-彩票三个亿-| www.22072.com-足彩分析师怎么赚钱| www.083120.com-各省快三球走势图| www.269363.com-8080cc彩票-| www.437708.com-256买彩下载| www.602755.com-数字彩票统计软件| www.743855.com-网上福彩快三购彩| www.889162.com-快三豹子通中多少钱| 大赢家彩票网www.178937.com| www.xj80.cc-福建福彩快-| www.533550.com-买什么彩票简单一点| www.301295.com-精彩十分推荐| www.126758.com-网易新快三-| www.125434.com-彩之家开奖下载| www.320108.com-福彩小德定位今天| www.476422.com-六福彩票注册| www.52dg.cc-简单创意色彩画| www.603862.com-到哪买足彩-| www.692821.com-体彩图库-| www.nz22.com-京彩集团江苏快3| www.275926.com-各种釉彩大瓶赏析| www.367750.com-彩铅画人物古风全身| www.509827.com-福利彩票百家号| www.677163.com-掌上福彩宝典害人| www.952215.com-时彩平台网址| 大赢家彩票平台www.306922.com| www.lq01.com-中彩网点数是钱吗| www.94se.cc-易彩用什么软件破解| www.7000.cm-快三末班车几点| www.47057.com-14场胜负彩分析| www.033637.com-乐和彩彩票靠谱吗| www.810737.com-时时彩挂机软件| www.915432.com-淘宝招彩票代玩| www.998082.com-葫芦娃论坛香港彩票| www.466846.com-黑龙江体彩票| www.551709.com-甘肃快三在线看| www.636265.com-彩虹糖机-| www.851934.com-体育彩票7位数玩法| www.ul7.cc-褔彩体彩开奖结果| www.22cd.com-体彩有规律吗| www.wn21.com-内蒙古快三第49期| www.703363.com-七乐彩模拟机| www.548667.com-高频彩票平台| www.699875.com-夏津彩客上几个小时| www.970733.com-足球彩票手机新浪网| www.854006.com-彩宝典2.6.0| 网易彩票www.517075.com| www.89kd.com-港彩平码三中三规律| www.338315.com-贾峪镇彩票中奖| www.586524.com-彩票打偏态-| www.761784.com-河北彩票开奖杳询| www.971988.com-泰安体彩中奖| www.19861.cc-时时彩论坛高手绝学| www.058682.com-彩票哪种中奖率高| www.027517.com-彩色相片什么时候有| www.070166.com-湖南彩礼-| www.1el.com-体彩排列五中五百万| www.754.pw-快三导师带计划| www.01670.com-彩票代理返点有多少| www.03866.cc-网络彩票害了多少人| www.92cz.com-彩票试玩赚佣金| www.9113.net-彩民之家彩图| www.l68.top-电脑彩票走势图软件| www.268720.com-金沙博彩骗局解密| www.3705.org-福彩3d全年开奖号| www.604161.com-竞彩5258官网| www.757798.com-中彩网怎么提现不了| www.ut48.com-快三大小单双计划| www.254421.com-亚博彩票软件| www.995453.com-易彩诈骗-| www.x21.website褔利彩票开奖杳询| www.931582.com-彩票资讯彩客网推荐| www.9996.gg-彩票老是中一两个球| www.667475.com-体彩扑克三开奖结果| www.yd74.com-体彩35选7-| www.pw72.com-西官彩-| www.1270.net-福利彩票福建| www.7700.org-天天分分彩官方网站| www.65299.com-炫彩摄影沙龙| www.701983.com-有没有人用彩票软件| www.816391.com-一分钟开大小是什彩| www.895247.com-福彩3d五码走势图| www.952039.com-彩神可靠吗-| 千百万彩票www.qbwc1.com| www.85yv.com-十四彩胜负彩推荐| www.hb49.com-中国福利快三| www.884887.com-高频彩不能追号| www.327422.com-福彩和体彩哪个坑| www.343773.com-福彩3d杀跨高手| www.503627.com-易彩网络平台| www.053711.com-足彩竞彩投注| www.174018.com-大发快三官网| www.665821.com-七乐彩陕西大奖| www.026023.com-大师彩票安全吗| www.714305.com-福彩3的-| www.665874.com-欧洲福利彩票| www.640759.com-荣耀彩票是正规的吗| www.971377.com-彩票怎么玩才能赢钱| www.609636.com-腾讯分分彩三星漏洞|