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天

知道了
澳门足彩 www.89158.cc-福彩3d选号规则| www.6135.biz-彩宝贝七星彩杀号| www.411513.com-福彩开奖日期官网| www.577365.cc-快三星号代表什么| www.290391.com-内蒙快三代理| www.510119.com-网易彩票人工客服| www.731471.com-福彩三地黑圣手字迷| www.844007.com-彩票中奖喜报图| www.929909.com-七星彩预测号码|注| www.981561.com-体彩七星彩奖结果查| www.cs23.com-稳定的彩票平台| www.vy93.com-福彩快三最多多少倍| www.07fm.com-六开彩票结果| www.426.tm-97彩票网址导航| www.5060.vip-周易彩票预测公众号| www.vd38.com-智慧彩票预测下载| www.1305.pro-枫创乐彩靠谱吗| www.788329.com-足彩19039开奖| www.873475.com-彩38彩票网下载| www.952845.com-9号彩票官方| 凤凰彩票www.77803f.com| www.xb40.com-幸运彩娱乐-| www.45pi.com-深圳福彩转让| www.0303.tv-网络彩票追杀系统| www.6722.bid-彩票输了一千多万元| www.22121.cc-名彩票-| www.460852.com-可信的彩票投注网站| www.853102.com-彩票平台能对刷吗| www.24024.com-雅彩票-| www.81685.com-河南福彩中奖投注站| www.108342.com-中国足彩竞猜官网| www.205620.com-赢家彩票注册邀请码| www.322562.com-手机购彩票app| www.715573.com-彩票微助手怎关| www.979164.com-旋子彩画高清图案| www.3535.cm-微彩网络错误| www.028273.com-87彩店官方邀请码| www.319489.com-网易彩票欧洲杯| www.490666.com-淘宝彩票国家允许吗| www.630257.com-福利彩票3月21日| www.758752.com-qq彩票能买吗| www.8099.cc-荣兴彩票直播网| www.990649.com-e球彩软件-| www.zn20.com-飞鱼彩票规律| www.213.in-好运时时彩网址| www.8146.biz-三d众彩网专家预测| www.40118.com-新浪彩票任九| www.024569.com-彩神通代理是真的吗| www.249995.com-全球彩票安卓版下载| www.372217.com-黄鹤楼大彩隐藏抽法| www.368747.com-澳彩开奖现场直播网| www.954474.com-浙江风彩票网| www.463660.com-万豪彩票输了几万| www.339379.com-生彩宝手机版下载| www.886641.com-随机彩票真能中奖吗| www.202008.com-分分快三预测网站| www.285542.com-苹果手机购彩软件| www.410089.com-跑车彩票攻略| www.672368.com-快彩技巧-| www.285867.com-最大的快三网站| www.567382.com-南京彩票店生意转让| www.670229.com-四星彩票-| www.807015.com-山东体彩客户端下载| www.898293.com-彩票代理如何拉玩家| www.980989.com-七彩主机-| www.bx20.com-博彩推广技巧| www.94ot.com-怎么下载k8彩票| www.700533.com-全国联销图彩迷天地| www.854489.com-彩客网竞彩足球开奖| www.958630.com-七星彩数据计划| www.qe50.com-好彩柠檬双爆多少钱| www.29qd.com-福彩3d中奖号昨天| www.74040.com-老梁说彩票完整视频| www.096371.com-四川省体彩中心主任| www.254351.com-爱乐彩平台-| www.339248.com-区块链彩票概念股| www.444028.cc-淘宝快三购买技巧| www.620092.com-永盛彩票网靠谱吗| www.744599.com-宏盛彩票软件| www.022411.com-vr时时彩-| www.135297.com-博乐互动彩票| www.278816.com-福利彩票正规app| www.388969.com-华彩人生新版| www.698717.com-6加1彩票怎么中奖| www.89pl.com-中国福利彩票的由来| www.949215.com-韩国pc28彩票| www.41188.com-彩虹六号国服预约| www.754217.com-抢红包彩票-| 彩客网www.606255.com| www.669023.com-海南私彩稳赢| www.622418.com-体彩排列五众彩网| www.830840.com-三分时时彩出号规律| www.44296.com-全民彩票注册网站| www.510255.com-泉州彩票中心在哪里| www.870336.com-体彩6十1走势图表| www.030.org-北京人人中彩票| www.9858.site-古建彩绘纹样大全图| www.qn56.com-快三外挂软件| www.899681.com-快乐十分钟彩票平台| www.74sb.com-天狼星七星彩预测| www.611180.com-微彩吧官方站| www.476391.com-今曰七乐彩开奖号| www.879626.com-易彩一彩民福地网页| www.35ax.com-网投港彩48倍平台| www.10268.com-凤彩彩票网可以玩吗| www.525880.com-新乐彩票平台正规吗| www.178706.com-广西新快三开奖结果| www.988224.com-掌中彩真的假的| www.zo02.com-福利彩票好彩3规则| www.263.club-体彩大乐透字谜总汇| www.um8.com-彩票开奖直播大厅| www.bx54.com-最新彩票平台| www.16ko.com-北京竞彩分析师招聘| www.036350.com-九彩凤凰与弓的传变| www.263193.com-什么网站可以买体彩| www.fd23.com-福彩快开怎么玩| www.273343.com-福利彩票工作理念| www.578548.com-足球竞彩开奖| www.580617.com-体彩专管员考试试题| www.678395.com-签到送彩金app| www.37708.com-什么是7星彩| www.108576.com-14场胜负彩奖金| www.232628.com-彩票号码预测| www.76sa.com-体育彩票七位数下期| www.211353.com-超神时时彩独胆| www.337353.com-精彩十分5d直选| www.695068.com-唯彩买量分布| www.988876.com-江苏快三必出号码| www.fi56.com-注册送19彩票| www.85eo.com-足彩复式转9软件| www.7457.pw-体彩审批难吗| www.669658.com-今日彩票农历| www.39ak.com-水溶彩铅风景画图片| www.1501.me-彩虹屁文案追星| www.158890.com-彩票开奖结果百度| www.658928.com-中国彩票都是假的吗| www.hy16.com-和值快三计划| www.015996.com-唯彩会彩票老店主| www.89323.com-合乐彩竞彩app| www.497162.com-有没有彩票分析师| www.50ef.com-今日福彩图会| www.ys90.com-我要看体彩和福彩| www.506107.com-江苏体彩七位数历史| www.662870.com-国彩赚钱吗-| www.120196.com-宝马彩ag-| www.60qr.com-掌中彩官网投注| www.559616.com-七星彩怎么买中奖高| www.7553.me-为什么买竞彩总是输| www.995334.com-北单竞彩app| www.27gp.com-有人买几万彩票| www.268308.com-体彩天下快三| www.118951.com-网易福利彩票预测| www.98473.com-分分彩后一公式| www.2384.vip-上海上海福彩网官网| www.76qg.com-体彩今晚几点开奖| www.575.cc-破解彩票算法| www.019956.com-湖北快三杀号定胆| www.54ql.com-贵阳市体彩兑换地址| www.554274.com-体育彩票店广告词| www.zr58.com-双色球彩票规则| www.2627.me-福彩快3倍投大小| www.796373.com-凤凰彩票有几个数字| www.mb3.cc-吉林省快三遗漏查询| www.401720.com-天天彩票官方直营网|