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天

知道了
彩01彩票 www.w38.in-彩溢健康会所| www.176129.com-快三彩票网-| www.716389.com-彩铅苹果画-| www.9545.org-海南马彩最新消息| www.555590.cc-3地乐彩网-| www.2800.tv-如何与网友交流彩票| www.tb62.com-体彩排三和值对照表| www.278516.com-彩票害人输了八十万| www.876144.com-重庆时彩投注软件| www.9996.date-淘彩票客户端下载| www.5248.xyz-皇冠派彩-| www.705651.com-福彩3d图迷第一板| www.xq96.com-七星彩历史开奖数据| www.8429.loan-中国彩客网首页官方| www.058142.com-乐彩吧下载-| www.324355.com-国乐彩软件-| www.602209.com-彩票售票员好做吗| www.981769.com-跟计划买彩票真的吗| www.74nm.com-好彩客彩票怎么样| www.92397.com-精彩彩票下载安装| www.169049.com-福彩3d预测-| www.479183.com-七星彩合分怎么打| www.691971.com-群英会遗漏彩乐乐| www.872207.com-毕节彩票中心地址| www.yn53.com-快三有多少几率中奖| www.6555.mobi-彩民彩票支付不了| www.92818.com-标准施工彩钢围挡| www.369896.com-彩生活信息化平台| www.626895.com-幸运号买彩票| www.267511.com-福利彩票筛选器| www.4000.cn-最准的欧赔博彩公司| www.185529.com-分分快三假的| www.636118.com-彩虹六号墨冰价值| www.811249.com-福彩藏机图迷| www.011189.com-昨晚彩票开奖号码| www.872605.com-湖南体彩赛车走势表| www.768518.com-黑彩买奖延迟漏洞| www.974039.com-体彩投注助手app| www.048899.com-江苏快三和值跨度图| www.015579.com-七星彩012-| www.138725.com-鸿彩网盈利模式| www.369954.com-928彩票应用| www.46wr.com-体育彩票店面装修| www.878656.cc-体彩网七星彩直播| www.cai4455.com河南快三走势| www.tv32.com-苹果版福彩快三| www.961763.com-体彩山东十一选五| www.167178.com-江苏快三开奖走势图| www.34727.com-永盛彩票网靠不靠谱| www.892249.com-福彩3d选号过滤器| www.05ev.com-体彩任选9场| www.0232.cn-淼鑫彩票网站| www.17767.com-体育彩票招聘| www.63496.cc-中国竞彩手机版| www.023114.com-利彩彩票app官网| www.113538.com-体育彩票排3| www.200079.cc-所有彩票开奖结果| www.308252.com-在手上怎样买彩票| www.50ef.com-今日福彩图会| www.961594.com-各种釉彩大瓷瓶| www.8471.com-北京开彩票店| www.95368.com-彩票属于哪种五行| www.108789.cc-9万彩票坑-| www.279928.com-皇家时时彩app| www.388633.com-七星彩投资-| www.511760.com-足彩赔率怎么看| www.625411.com-1998彩票app| www.707055.com-彩经网安徽快3| www.802204.com-云南省福彩网| www.900667.cc-天下精英彩票资料| www.985861.com-中国竞彩官方| www.ir61.com-彩票中奖规则大乐透| www.1qe.com-大发快三刷流水贴吧| www.0460.xyz-彩三彩票在线| www.05531.com-宏大彩票-| www.233463.com-北京福彩pk拾官网| www.393552.com-黑龙江体育彩票网| www.506244.com-今天的银海布衣彩图| www.596543.com-彩博士杀码-| www.671415.com-赢彩票app客服| www.743411.com-懂彩宝大乐透| www.815362.com-福利彩票在线投注卡| www.895845.com-华夏彩票怎么登录| www.966971.com-彩手机自动投注器| 国彩网www.guocai667.com| www.kr15.com-3d最新预测凤彩网| www.t53.top-i8网上黑彩票| www.94ix.com-彩票567-| www.3672.biz-苹果彩票网线路入| www.02515.cc-彩票了2元网走势图| www.61414.com-彩票买大小-| www.659372.com-博彩源码转让| www.24486.com-彩铅混色表-| www.873068.com-湖北快三杀号360| 百姓彩票www.bxcp3.com| www.ry35.com-手机买彩票安全吗| www.15lo.com-成都彩票店转让信息| www.0364.cc-彩票杀号技巧| www.900907.com-彩覇王-| www.981632.com-q彩网快3-| www.cp8669.com-人人快三登录| www.kn96.com-新浪足彩竞技风暴| www.b22.in-福彩3d鬼六图库| www.o11.shop-豪彩娱乐登录| www.132006.com-今日福彩三d开奖| www.209398.com-app人人中彩票| www.330496.com-诺亚彩票可靠吗| www.456549.com-巴厘岛国际彩票平台| www.807607.com-福利彩票收藏| www.142957.com-亚博科技彩票app| www.400124.com-美人鱼彩票下载安装| www.7742.cn-∪9彩票破解| www.000654.com-福彩多彩网下载| www.623201.com-摇发彩票黑台子| www.992272.com-时时彩百位如何定胆| www.1001.org-玖玖彩票能提现吗| www.9972.top-进口彩妆品牌| www.018693.com-利彩可以做吗| www.168067.com-快三大小单双app| www.278661.com-快三三码必中| www.557721.com-大赢家彩票提现失败| www.698887.com-初学者彩铅画视频| www.854547.com-安徽快三形态彩乐乐| www.586115.com-谦喜彩票登录中心| 易彩网www.99638p.com| www.032238.com-爱尚彩靠谱吗| www.289633.com-十大彩票-| www.58190.com-同志软件彩乐| www.063825.com-网上私彩是假的| www.197761.com-上海快三二码遗漏码| www.453360.com-雅彩彩票可以提现吗| www.713586.com-王者彩票怎么容易中| www.041147.com-彩票中千万大奖的人| www.465746.com-大众彩票网址| www.635167.com-续写七彩音符| www.7329.biz-彩虹六号新手老是死| www.90798.cc-安装全民足彩彩票| www.657858.com-彩宝贝网工具| www.789785.com-香蕉计划竞彩理财| 500彩票www.50026j.com| www.176703.com-快三技巧有哪些| www.79gv.com-福利彩票中一个红球| www.654795.com-体育七星彩图规| www.823440.com-彩涂铝卷市场| www.61022.cc-机选七乐彩号码| www.298293.com-沈阳快三是官方的吗| www.844012.com-福彩公益奖-| www.363619.com-彩虹毕飞宇阅读理解| www.107813.com-中华彩票中福快3| www.507955.com-七星彩明月珰番外三| www.572952.com-福彩3d网站群| www.656308.com-龙虎彩票在哪玩| www.kw62.com-七天彩登录入口| www.713985.com-七彩色的图片大全| www.9943.org-cc彩球网登陆中心| www.83ub.com-天彩粮餐饮贴吧| www.6292.com-福彩杀号软件下载| www.09292.cc-广东福彩助手| www.54339.com-彩票平台用抓包技术| www.90854.com-彩票复式投注计表| www.395755.com-256时时彩-| www.25110.com-彩铅品牌排行榜| www.86399.com-我想去买彩票| www.511506.com-富鱼彩票网-|