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.276326.com-七乐彩10中5| www.30005.com-体彩管控-| www.088396.com-xy77彩票app| www.59881.cc-恒彩88登录地址| www.970310.com-七彩球中奖-| www.pg46.com-中国体彩下载| www.8345.xyz-时时彩分分快三规则| www.672130.com-特彩吧最老版| www.781424.com-竞彩足球中奖图片| www.36268.com-北京快三公交时刻表| www.655711.com-七星彩结果查询| www.358490.com-体育彩票那几天开| www.472889.com-天天抢红包彩票平台| www.vz63.com-体彩任选5开奖公告| www.93fw.com-领彩票一等奖怎么领| www.647768.com-好彩运-| www.833826.com-体彩开机直播| www.ds98.com-福彩助手-| www.204885.com-网络快三违法吗| www.545689.com-七星彩开奖查询结果| www.14vq.com-中国福利彩票是什么| www.8251.xyz-彩票要怎么买才能中| www.635539.com-中国彩宝哪个品牌好| www.006260.com-彩37官网下载| www.935526.com-那些凤凰彩票导师| www.846155.com-彩票神人王成周采访| www.920999.cc-重庆桥洞彩票男| www.980570.com-玩体彩屋犯法吗| www.od31.com-福彩票开奖时间表| www.2ck.com-彩乐乐快3-| www.65vc.com-完美国际向彩文坐标| www.374619.com-五分⑥和彩香港的吗| www.7225.cm-彩虹六标准版多少钱| www.26927.cc-七星彩中奖格| www.794234.com-购买体彩属于赌博吗| www.1411.in-众彩子默双色球杀号| www.7625.shop-山西彩民乐图库| www.06153.com-潮款卖彩票500万| www.40es.com-七星彩一注机选号码| www.71ig.com-江苏快三开出的号码| www.970454.com-酷彩吧彩票可信吗| www.984838.com-福彩网提现-| www.ih51.com-乐彩17500论坛| www.31353.com-软件买的彩票靠谱吗| www.441846.com-香港十分彩开奖记录| www.5304.cc-买分分彩的技巧| www.22zo.com-中彩票的段子| www.204409.com-快三官网开奖| www.301295.com-精彩十分推荐| www.124990.com-腾讯彩票全天计划| www.75770.com-彩票亏损救援金| www.558049.com-彩之云app-| www.447.me-福彩8平台邀请码| www.5777.hk-ok澳客彩票网| www.158401.com-快乐彩五行最大遗漏| www.919372.com-彩票打印机故障| www.797586.com-彩票机选中奖的多吗| www.335070.com-天天彩票选四结果| www.055263.com-天空体彩开奖时间| www.53033.cc-重庆时时彩春节有吗| www.044441.com-湖北快三个位走势图| www.wt43.com-中国福利彩票开奖网| www.671663.com-体育彩票11选5走| www.796430.com-快三注册代码是什么| 13e彩票www.510860.com| www.835520.com-26期福利彩票走向| www.911453.com-福彩公益项目报道| www.975547.com-福利彩票内蒙古快三| www.xt2.com-真正玩彩票赚钱的人| www.1881.in-每年今天福彩出奖号| www.31178.cc-福彩3d便民走势图| www.982076.com-双色球凤彩网预测| www.73pn.com-福建掌中彩信息技术| www.163267.com-江苏快三手机版| www.225039.com-福彩快三中奖多少钱| www.89jw.com-彩漂液能洗羽绒服吗| www.2771.cm-彩02彩票登陆| www.01800.cc-彩虹六号急停| www.676570.com-国家规定彩礼钱多少| www.od32.com-欢乐快三骰子| www.978517.com-白羊3d预测新彩网| www.974.mobi-1分彩和值单双| www.55408.com-境外时时彩网| www.43222.com-彩票双色下载| www.802870.com-豪彩登陆-| www.973176.com-新版彩虹代刷app| www.391893.cc-腾讯彩票计划软件| www.573156.com-什么叫体彩-| www.722479.com-时时彩高手论坛| www.785971.com-xr有原彩吗-| www.595550.com-彩多多线路测速| www.71975.com-234彩票官方网站| 博友彩www.451956.com| www.831909.com-中国福彩七乐彩规则| www.11879.cc-超级彩票骗局| www.430386.com-竞彩5分彩走势图| www.436451.com-广州铭彩印刷| www.574245.com-大星彩票app| www.681816.com-彩麒麟骗局-| www.852808.com-168官方彩票| www.592315.com-幸福彩票合法吗| www.957959.com-彩票业-| www.dt8.cc-快三反倍投-| www.k45.net-重庆时时彩五星综合| www.572040.com-快三投注微信| www.663852.com-大富翁平台时时彩| www.732551.com-百万彩票旧版入口| www.794219.com-国家反对赌博开体彩| www.859949.com-福彩和值走势连线图| www.909538.com-福彩图纸今天图| www.963564.com-被彩票托骗了| 天天彩票www.2373a.com| www.551003.com-体彩合买软件| www.570528.com-七彩云南歌词| www.611133.com-香港跑马彩票靠谱么| www.672900.com-七星彩推号码| www.729858.com-彩客彩票旧版哪里下| www.785044.com-中彩票的几率是多少| www.841085.com-三地彩票中奖号| www.893425.com-新快三走势怎么看| www.949312.com-快三彩票怎么下载| www.990624.com-江苏省体育彩票中心| www.fw06.com-福建福彩快三| www.662613.com-七星彩每晚几点开奖| www.126688.com-福彩3d组六魔图| www.dv38.com-福彩网址是多少| 亿发彩票www.901375.com| www.026329.com-足球彩票开奖时间| www.175857.com-快三追号神器| www.339889.com-山西体彩七星| www.zz0.com-河南福彩快三走试图| www.92yk.com-英国五分彩开彩结果| www.972646.com-水溶性彩铅画风景| www.ir1.com-信誉最好私彩平台| www.rs52.com-安徽体彩开奖| www.w98.top-体育彩票封机时间| www.35vr.com-希腊五分彩开奖软件| www.093.biz-彩票反倍投挂为至| www.026221.com-福彩3d图迷慧总| www.909646.com-大学生qq群买彩票| www.100603.com-乐彩网怎么打不开| www.eq33.com-678彩票网-| www.898.websitenba篮彩彩票| www.736208.com-55l25中国彩吧| www.690788.com-体彩排列3开奖号| www.84738.com-广西淘宝快三| www.948930.com-体育彩票购彩app| www.735672.com-彩票不可能中奖| www.173625.com-大发彩神-| www.33735.com-福利彩票新手入门| www.pc67.com-球彩-| www.08fv.com-彩工网手机版| www.995422.com-易彩骗局-| www.26939.cc-七星彩中头奖多少钱| www.179811.com-七星彩玩法中奖| www.306198.com-彩6app官网下载| www.781401.com-百乐彩网-| www.884255.com-91彩神能挣钱吗| www.51868.com-福彩3d第72期| www.380915.com-彩票开奖结果选四| www.27587.cc-500彩票计算机| www.6473.xyz-必赢客时时彩专业版| www.31052.com-彩票疑云结果怎样| www.7672.top-福利彩票门头图片|