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.773861.com-博彩官方彩票网| www.cp855.com-福州快三走势图今天| www.ue35.com-七乐彩历史开奖结果| www.21xe.com-盛世彩票导-| www.350360.com-彩色笔中性笔| www.657943.com-三分彩开奖走势图| www.1967.wang-时时彩代打-| www.22337.com-高价彩礼-| www.98387.cc-时时彩一分钟开一期| www.121476.com-500彩票网的套路| www.229120.com-晚晚好彩开奖号码| www.428001.com-足彩105期-| www.6858.cc-体彩飞鱼口诀汉字四| www.772473.com-重庆时时彩3星遗漏| www.977432.com-世界杯彩票中奖规则| www.2035.date-彩虹小鸡主题曲| www.52597.cc-通盈彩票是不是骗局| www.404777.com-一定牛快三预测分析| www.807850.com-福利彩票正版app| 好彩头彩票www.23579b.com| www.236580.com-全民彩票吧-| www.448727.com-麒麟彩票是什么| www.601097.com-722彩票网客户| www.59958.cc-百彩影院-| www.142529.com-跟彩运网一样的网站| www.386832.com-6698彩票app| www.653992.com-基诺彩彩票开奖记录| www.862319.com-幻想自己中彩票中奖| www.988234.com-竞彩最大投注| www.g97.com-cb8彩软件-| www.481858.com-河南幸运彩争先勇士| www.656093.com-星彩代挂-| www.lg72.com-高手计划中福快三| www.57vz.com-彩票课文分段| www.gp22.cc-新疆喜乐彩开奖公告| www.127448.com-好运来彩票诈骗| www.425604.com-福彩彩票几点开奖| www.081795.com-七星彩去哪才能买到| www.270368.com-新彩票安卓-| www.513521.com-三彩丽雪没有官网吗| www.697056.com-清明节彩票站放假吗| www.839688.com-彩色耐磨硬化地坪| 500万彩票www.39500g.com| www.952700.cc-快三如何精确到数字| www.hs90.com-福彩快三大家输多少| www.1187.pw-江苏快三微信导师| www.dk79.com-全民彩票玩法技巧| www.958633.com-够力解梦图版七星彩| www.933827.com-哪里可以买体彩| 乐彩网www.lcw199.com| www.62292.cc-大家乐时时彩网址| www.055570.com-极速北京快三查询| www.173750.com-兰州快三连线走势图| www.254123.com-玩彩网最新版| www.924477.com-6e6e彩票-| www.983128.com-福州福彩中心| www.xo9.cc-代玩幸运快三可信吗| www.444733.com-彩票分分彩计划| www.563642.com-湖北快三怎么手机玩| www.694343.com-头奖彩票网最新公告| www.893339.com-乐彩网计划网址| 8号彩票www.60108m.com| www.90sn.com-手机购买足彩app| www.589503.com-好彩什么意思| www.2556.me-彩票冷热温码怎么看| www.168418.com-安徽快三预测和值| www.143644.com-青海福彩中心地址| www.296976.com-三宝乐购彩票合法吗| www.86jg.com-体彩武林快开走势图| www.222833.com-贵州体彩网彩| www.567548.com-昆山体彩兑奖中心| www.809383.com-彩客网官网下载安装| www.ad77.cc-幸运彩app下载| www.70vv.com-彩易达业绩-| www.6477.vip-亏损返现的彩票平台| www.57223.cc-彩宝宝官网-| www.026085.com-手机淘宝彩票哪里买| www.120120.com-即开型彩票吧| www.231668.com-一分快三彩票官网| www.308009.com-彩票时时彩买龙虎| www.377011.com-308彩票安卓版| www.553220.com-快三群里面有没有托| www.967663.com-足彩14场推荐预测| www.cp7267.com-微信群里玩快三幕后| www.yi98.com-下载湖北快三| www.26hy.com-福彩三的魔鬼图片| www.1123.top-名人彩票官网登录| www.23217.cc-天吉手机彩票论坛区| www.25044.com-彩铅叠色技巧图| www.85389.cc-5oo彩票下载| www.132434.com-各地彩礼限高的规定| www.223699.com-竞彩足球彩票| www.308244.com-足彩竞彩结果查询| www.578.live-分分彩买大小技巧| www.5927.top-大中华彩票系统| www.22497.cc-彩票双色球app| www.500155.cc-速赢彩app下栽| www.931803.com-世界杯彩票投注分析| www.95509.com-足彩直播吧-| www.406218.com-代理彩票赚钱容易吗| www.595911.com-鑫亿彩邀请码| www.728668.com-体彩排列三图谜| www.240976.com-彩铅风景画简单落日| www.420234.com-彩票刷分红-| www.612075.com-这期算下期彩票号| www.61629.com-小米彩票入口在哪里| 彩69www.091150.com| www.106979.com-中国足球竞彩比分| www.250896.com-豪彩平台下载安装| www.036649.com-福彩3d预测软件| www.176188.com-内蒙福彩快三| www.303126.com-在线买彩票app| www.382206.com-分分彩如何挂机刷| www.541348.com-彩票榜怎么打不开啦| www.997034.com-欢乐彩官网开奖结果| www.371.websitea23彩票-| www.699052.com-中福彩中心唐启伟| www.816038.com-香港高级彩图| www.909113.com-新加坡华乐彩票开奖| www.980487.com-送彩金游戏-| www.hm04.com-上海快三怎样能稳赚| www.234884.com-福彩3d彩报中心| www.339264.com-生彩宝怎么设置胆码| www.481382.com-拉萨彩票中心| www.621009.com-爱乐透买足彩靠谱吗| www.729111.cc-桃屋猫3d全彩本子| www.824896.com-彩678用户注册| www.961800.com-用微信能不能买彩票| www.cp814.com-代理快三怎么拉人| www.xy83.cc-七星彩中奖彩票图片| www.84oo.com-北京彩公司-| www.3749.win-彩票3d千禧试机号| www.20557.com-重庆实时彩官网| www.61135.cc-非法彩票平台| www.667380.com-澳门彩球网站| www.09152.com-玩彩票下载安装| 网易彩票www.095wy.com| www.182224.com-中国足彩网-| www.333669.com-中彩票后让父母领奖| www.616723.com-甘肃福彩网官方网站| www.888521.com-95彩票苹果版| www.cp417.com-江苏快三注册| www.586854.com-南方双彩大乐透预测| www.7298.vip-谁有时时彩做号软件| www.02620.com-福利彩票快3银川| www.66464.cc-京东里的彩票方案| www.105669.com-709官方彩票| www.571982.com-快三倍投计算器在线| www.920936.com-彩神争霸8lx| www.49nw.com-分分快三精准预测| www.9773.org-网易彩票篮球| www.15980.com-彩票gg天津时时彩| www.045768.com-体彩19033-| www.204923.com-福彩3d字谜专区| www.339593.com-爱彩乐开奖助手| www.471228.com-招财猫彩票app| www.263709.com-彩票最新开奖大全| www.365556.cc-用彩色铅笔画画| www.484213.com-369彩票网站| www.576459.com-汉中彩票投注站| www.655715.com-m8彩票网-| www.734038.com-快三网络平台| www.825757.com-山西大同快三查询| www.884714.com-鳄鱼网彩票-|