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天

知道了
亚洲28 www.93351.com-七星彩奖号-| www.954393.com-大发时时彩计算公式| 彩票500万www.596035.com| www.034901.com-合肥福彩中心在哪| 金掌柜www.83993n.com| www.672264.com-福彩3d和值走试图| www.034970.com-六十万彩礼-| www.291005.com-爱快三-| www.441164.com-中国彩杯-| www.em42.com-昨天快三走势图上海| www.500096.cc-078彩票有人玩吗| www.uc44.com-怎么预防快三大龙| www.04ph.com-足彩竞彩新浪500| www.192510.com-快三赢钱很简单| www.39722.com-足球彩票18075| www.92021.com-丰彩彩票是真的吗| www.800334.com-卓易彩票怎么没有了| www.970829.com-迷彩免手机影视网| www.cai5671.com快三图表大全| www.kz80.com-皇家彩-| www.p99.online-86彩票-| www.82vr.com-购乐彩网-| www.4155.cc-彩虹的重力秦渭| www.915749.com-体彩福彩加盟条件| 818合彩www.www.9889hc.com| www.z80.net-选彩票公式-| www.sh46.com-彩乐乐专业走势图| www.526216.com-竞彩的窍门-| www.pg83.com-江苏快三预测号码| www.452378.com-天天时时彩计划助手| www.417718.com-博彩nba分析心得| www.614414.com-彩票专家推荐平台| www.734059.com-双色球凤彩字谜| www.815289.com-福彩排列7怎么买| www.888926.com-彩站宝-| www.958046.com-3d福彩网上购买| www.cai8333.com极速快三规律| www.857135.com-菲律宾彩票推广工资| www.5684.com-微信玩彩票群| www.99gv.com-福彩3d图库大熊猫| www.1940.com-99新彩吧-| www.uo65.com-福彩3d五行乐彩网| www.21od.com-qq购彩-| www.ir46.com-彩票兑奖有效期| www.oj42.com-云南福利彩票| www.980111.cc-彩票销售员招聘| www.dq38.com-省份快三是什么| www.161766.com-分分彩后三500注| www.264299.com-彩票手机app| www.356358.com-红韵彩票网站正规不| www.yt06.com-时时彩做号手机版| www.802359.com-竞彩足彩让胜| www.898001.com-除了福利彩票广告| www.cp6177.com-快三里面的屠龙技巧| www.rh36.com-千万彩票app下载| www.63da.com-3d彩民乐图库| www.639234.com-彩店云app-| www.718131.com-彩虹屁夸人语录| www.81ii.com-江西体彩十一走势图| www.8456.cn-福彩三地和值表图片| www.527.cc-喝彩中华2018| www.8257.net-福彩3d百十位差值| www.304828.com-彩票app下载大全| www.556998.com-8079彩票-| www.hb14.com-彩运8是正规平台吗| www.889909.com-彩票店广告语| www.112652.com-福利彩票快3多少钱| www.234200.cc-68彩票网-| www.353169.com-热购彩票是真是假| www.495221.com-彩漂能洗黑色衣服吗| www.05379.com-51彩下载安装| www.iz41.com-国家体育彩票app| www.p16.me-彩票和值振幅走势图| www.92uz.com-乐度炫彩百度百科| www.4177.vip-买彩票犯不犯法| www.619959.com-福彩3d夏天开机号| www.60838.com-七乐彩今晚开奖结果| www.028334.com-最新平台送彩金| www.184330.com-网络彩票骗局大揭密| www.036608.com-老彩民app靠谱吗| www.506159.com-彩票倍投计划| www.937123.com-福利彩票分析大师| www.hf4.com-安徽快三赚钱技巧| www.449436.com-容声彩票-| www.565466.com-临沂福彩中心官网| www.630937.com-海南七星彩彩票网| www.692570.com-泰国彩票网-| www.787115.com-彩票怎么看大小单双| www.736510.com-福彩三地谜语总汇| www.88983.cc-福利彩票店转让风险| www.424545.com-天天赢彩票网| www.34454.com-下载上海体彩| www.87897.cc-福利彩票千禧关注号| www.077295.com-打印机彩色打印| www.947792.com-福彩什么-| www.624051.com-彩经网排列5杀号| www.123060.com-快三规律-| www.59909.com-彩乐乐快乐十分钟| www.058661.com-今天银海彩报| www.8457.loan-为内蒙古喝彩原唱| www.493501.com-彩票5邀请码| www.27838.com-444cp彩票-| www.11308.cc-足彩胜负彩新浪| www.88834.cc-a25彩票-| www.28717.cc-兼职彩票投注手| www.63dl.com-福彩三地布衣天下| www.186815.com-彩票五分快三| www.444587.com-怎么能网上买彩票| www.88252.com-提现快的彩票平台| www.231875.com-湖北快三号码统计图| www.190089.com-彩票开奖公告| www.873725.com-35彩票苹果下载| www.947967.com-福彩刮刮乐客户端| 来运彩票www.9999y.cc| www.256544.com-体彩排列5走势图| www.69xe.com-8828彩票输钱| www.363716.com-表示彩虹样子的词| www.735131.com-百分之百中的彩票| www.860486.com-m8彩票软件-| www.970742.com-关于彩票中奖的说说| www.hc28.com-彩8彩票代理骗局| www.438456.com-港澳彩平台下载| www.526892.com-大皇冠彩票-| www.582890.com-彩票旋转矩阵| www.962591.com-星光彩票软件下载| www.cp61.com-彩迷网开奖-| www.664866.com-彩票复式怎么买| www.09ui.com-云彩店怎么下载| www.234412.com-合法的网上彩票| www.981522.com-93彩票安卓版| www.cp857.com-410彩票-| www.92gu.com-3d体彩开奖号码| www.217458.com-中国福彩客户端下载| www.sw73.com-新时时彩怎么玩| www.144302.com-玩彩输了怎么办| www.bh21.com-五分彩是合法的吗| www.s55.org-三星福彩下载安装| www.69473.com-98彩票官网合法吗| www.766672.com-学生适合买什么彩票| 500彩票www.66621q.com| www.848395.com-c38彩票领导者| www.97332.cc-古建筑荷花彩绘图案| www.422128.com-南宁哪里领体彩奖| www.520998.cc-千亿彩-| www.l64.cc-彩票走势图表格制作| www.559134.com-内蒙体彩中心在哪里| www.973184.com-彩虹搭建主站系统| www.la43.com-今日中彩是什么公司| www.15244.com-福彩3d报纸图迷| www.493023.com-微微彩票属于黑彩吗| www.321181.com-彩票扫描中奖软件| www.546251.com-福彩站点申请| www.92705.com-北京竞彩返点| www.603696.com-买足彩用什么软件好| www.276504.com-快乐彩首页-| www.rm72.com-彩票的走势如何看| www.679080.com-彩麒麟会开花吗| www.750444.com-开机i彩票-| www.830660.com-易彩票手机版下载| www.886323.com-凤凰彩铅画图片大全| www.952734.com-两分彩-| www.997964.com-七星彩票导航| www.ae53.com-体彩19032期| www.qw34.com-老重时时彩走势图|