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.302293.com-河内5分彩开奖结果| www.40404.com-体育彩票竟彩| www.878504.com-彩票倍投骗局揭秘| www.59xs.com-易购彩票合法吗| www.3712.com-福彩3d综合板| www.15177.cc-温州体育彩票注册| www.91966.com-顺丰丰彩怎么玩法| www.294566.com-五分快三下载| www.393968.com-久盈彩票app| www.624728.com-33彩票是谁超控| www.983339.com-盈彩在线678| www.bt66.cc-彩票工具大全| www.960213.com-高德体彩-| www.in82.com-新浪l足彩-| www.18pw.com-当天的彩票几点停售| www.626885.com-大优彩票下载手机版| www.727039.com-乐彩网是不是骗人的| www.815350.com-江苏体彩排列七| www.99965.com-浙江体彩飞鱼开奖| www.69477.com-八马彩票输了很多钱| www.98933.cc-用家人的生日买彩票| www.304856.com-大发快三稳赢计划| www.5938.cm-大中华彩票注册| www.624668.com-彩经网带坐标带连线| www.0127.vip-我国合法彩票有哪些| www.351337.com-汇彩网邀请码是多少| www.143548.com-福彩网提现-| www.758383.com-彩票01是正规的吗| www.lq99.com-旺彩大乐透app| www.356760.com-彩票怎么宣传| www.099079.com-网赚彩票团队| www.811190.com-彩票最简单计算方法| www.763281.com-外围app足彩软件| www.901995.com-彩6彩票网页版| www.gb48.com-可以买彩票的app| www.208195.com-广东深圳快三| www.333252.com-玩彩与心态-| www.522458.com-优乐彩登陆-| www.250477.com-好彩1走势图| www.596996.com-内蒙古快三结果图| 爱彩乐www.167918.com| www.ka39.cc-破解彩票数字规律| www.533636.com-体育彩票怎么开奖| www.746785.com-505彩票建多少年| www.572955.com-湖快三走势图彩乐乐| www.735233.com-概率说彩-| www.330728.com-福利彩票如何选号| www.425477.com-人人彩票怎么充值| www.541901.com-亚洲彩票信誉平台| www.617569.com-亿购彩真的假的| www.680636.com-爱中彩-| www.760611.com-青娃彩票生肖对照表| www.825932.com-彩民争霸下载| www.845656.com-369中国福利彩票| www.340722.com-沧州彩票网点| www.440180.com-贵州体彩官方版| www.552793.com-香港赌圣牛娃彩票| www.976942.com-父母私吞女儿彩礼| www.2738.in-怎么下载快三游戏| www.899387.com-博发彩票官方网站| www.1578.in-奥运彩票价值多钱| www.4650.cm-中彩票只是运气好吗| www.773271.com-恒彩彩票怎么样| www.78bu.com-如何买国外的足彩| www.2962.biz-彩民中大奖-| www.948299.com-福利彩票几时开始| www.621802.com-才台湾彩券-| www.697725.com-浙江体彩app| www.31531.com-彩票返水和返点意思| www.16305.com-五分时时彩大小走势| www.454338.com-魔方彩票软件下载| www.572967.com-江西快彩乐-| www.1092.cn-快三群里面有没有托| www.627990.com-做梦梦到彩票号码| www.723551.com-彩票怎么中上亿大奖| www.812992.com-福彩3d和值表全部| www.887890.cc-七星彩开结果奖历史| www.206178.com-彩票端软件-| www.314811.com-竞彩篮球中奖规则| www.443087.com-双彩球开奖时间| www.615078.com-三彩衣服质量| www.702285.com-盛澳竞彩合法吗| www.777456.cc-彩八仙时时彩苹果版| www.199902.com-高频选5彩票软件| www.310611.com-山东体彩兑奖流程| www.8822.red-快三大小助手| www.141102.com-99彩票信誉怎么样| www.499958.com-澳洲五分彩稳赢| www.586857.com-足球彩票怎么算钱| www.675660.com-福彩3地走试图| www.757922.com-西安彩票事件| www.966826.com-河南快三经验规律表| www.vd1.com-快彩助手-| www.b73.in-福彩三d和值跨度表| www.228971.com-河南快三连线图| www.71584.com-白菜博彩彩金群| www.653983.com-赢彩彩票真实吗| www.777329.com-重庆福彩手机购彩| www.888268.com-福利彩票如何分真假| www.919.xyz-7星彩号码机选| www.82ec.com-竞彩5千万大奖| www.456564.com-购物送彩票广告语| www.076906.com-体育彩票订票系统| www.34369.com-上海市福利彩票中心| www.525890.com-福彩吧网站可靠吗| www.590307.com-福彩三d字谜| www.668233.com-tt彩票-| www.747292.com-知聊505彩票| www.819320.com-福彩排列三开奖号| www.78ky.com-乐彩29期字谜总汇| www.3906.vip-招财猫彩票网站| www.231173.com-购彩网app下载| www.g15.club-四星彩开奖结果| www.384722.com-体彩考试答案| www.5024.cc-福建体彩开奖管方网| www.699754.com-官方手机购彩软件| www.863642.com-166彩票双色球| www.947403.com-福彩什么时候开始的| PK彩票www.www.23040.com| www.gq06.com-彩色压模地坪材料| www.xy10.com-d9彩票网-| www.36xb.com-天天彩票官方直营网| www.667486.com-跟导师买彩票| www.753298.com-香港百彩网网址| www.899759.com-彩票号码自动生成器| www.975090.com-七星彩规律图表| www.lx.cc-青海福彩快三下载| www.f69.club-彩票字谜大全| www.27jr.com-福彩天气网-| www.0702.com-一分快三怎么买| www.zs24.com-福利彩票派奖规则| www.01058.com-福盈门彩票网| www.82788.com-足彩19041预测| www.889358.com-c68彩票-| www.zz40.com-体彩小终端-| www.402605.com-3d彩吧杀号-| www.032151.com-七星彩历史中奖号码| www.337693.com-全发彩票相同平台| www.42ei.com-七星彩排列五群| www.834999.com-联盟过年炫彩| www.979406.com-好彩柠檬-| www.nt46.com-合法赌博彩票| www.32xp.com-彩票挂机脚本| www.45133.com-彩票刷水骗局| www.026801.com-彩票工资车哪里有| www.859075.com-168彩票计划网| www.973721.com-无极3时时彩合法吗| www.hj16.cc-竞彩投注技巧| www.13mm.com-辽宁十一选五彩票| www.282.pw-民权彩礼要多少钱| www.290308.com-快三选号助手手机版| www.85391.cc-竞彩容错解释| www.120621.com-买三d彩票的技巧| www.2947.cc-体彩店装饰-| www.027968.com-宏达彩票靠谱吗| www.fm2.cc-快三跨度什么意思| www.995324.com-香港五分彩正规吗| www.6014.shop-济南体彩中心在哪| www.81389.com-众彩网专家汇总看尾| www.959561.com-乐猫彩票-| www.523254.com-如何破解大发快三| www.bf37.com-快彩是骗局吗| www.03339.com-银川体育彩票网点| www.4201.com-汇彩国际可靠吗|