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.s81.cc-海南福彩快2技巧| www.047244.com-中国体彩快乐扑克4| www.353527.com-京彩钱包苹果版| www.191090.com-快三大小走势怎么看| www.16gp.com-号百彩票app下载| www.770604.com-彩虹七号无人机| www.893205.com-彩吧助手彩种全走势| www.969502.com-酷彩吧网页-| www.cr74.com-广西福彩投注客户端| www.e78.club-七乐彩直播现场直播| www.36fe.com-七星彩版图-| www.851.online-铁公鸡七星彩规律图| www.5111.com-福彩怎么对账| www.xd41.com-七星彩和质走势图| www.30zt.com-彩虹代刷网搭建服务| www.523.website彩500主页-| www.4370.biz-快彩是合法的吗| www.614456.com-时时彩专家排行| www.781849.com-58彩票换网址了么| www.885533.com-体彩排列五走势彩宝| www.25ir.com-华彩横溢是什么意思| www.95wm.com-唐龙福彩3d连线| www.017176.com-华宇腾讯分分彩| www.302401.com-七星彩规律图局王| www.404344.com-彩铅颜色调色表图片| www.531179.com-彩铅手绘教程| www.883.in-香港创富彩库| 福彩www.15355t.com| www.236793.com-足彩复试计算器| www.433100.cc-双色球杀号彩吧| www.578276.com-爱购彩彩票网是骗局| www.829807.com-11选5彩票大师| www.957743.com-095彩票-| www.gz77.cc-北京快三每天几期| www.7802.cc-腾讯分分彩投注技巧| www.985061.com-彩票实体店营销方案| www.ed91.com-大发快三总代理| www.c89.cc-彩粟开奖结果_| www.33jh.cc-福彩云南快三| www.5080.top-彩票是随机选好的嘛| www.tw95.com-彩票优惠活动台子| www.38zl.com-世界杯猜冠军彩票| www.21193.com-彩票人加盟-| www.033079.com-快乐5分彩开奖号码| www.120120.com-即开型彩票吧| www.200152.com-智慧彩挂机软件骗局| www.659344.com-时是彩杀号专家| www.754931.com-中国福利彩票怎么看| www.on3.com-一定牛江苏快三下载| www.sc56.com-时时彩后三杀号一码| www.444114.com-彩31靠不靠谱| www.551254.com-优彩网进不去| www.cp0035.com-快三网上到处拉人| www.tq67.com-安徽申请福彩| www.31mb.com-预测港彩生肖及方法| www.7860.vip-胜负彩在线过滤| www.50347.cc-旧版彩票77下载| www.96325.com-彩票识别码图形| www.057986.com-彩胜团队是骗局吗| www.466631.com-七乐彩哪里兑奖| www.576502.com-福彩快3跨2度表| www.668383.com-欢乐彩票官网诈骗| www.948343.com-排五走势图彩吧助手| www.cai662.cc-福彩北京快三开奖| www.th16.cc-浙江快三查询| www.777789.cc-万博博彩-| www.75558.com-彩票走势图数据大全| 网易彩票www.36788a.com| www.131905.com-东阿2018年彩礼| www.14215.cc-金华市福利彩票中心| www.13pg.com-巩义福彩-| www.461.loan-3d杀号定胆彩票| www.5118.club-福彩3d字i迷总汇| www.728302.com-附近福利彩票站点| www.826885.com-卖彩票提成-| www.905009.com-伯爵彩票是正规的吗| www.964846.com-浙江体彩怎么下载| 500万彩票www.39500d.com| www.478958.com-竞彩足球有几种买法| www.890996.com-时彩1分钟开一次| www.959263.com-彩票中奖小说排行榜| 818合彩www.www.9889hc.com| www.ci78.com-随州论坛快三论剑| www.10812.com-竞彩足球混合投注| www.786165.com-海南私彩头尾规律图| www.711126.com-名鸿彩票-| www.3760.vip-今晚的七星彩开什么| 易彩网www.12455l.com| www.36wa.com-彩票010-| www.259937.com-福彩大厅-| www.220083.com-快三杀一码技巧| www.293956.com-福彩东方6十1玩法| www.376402.com-本日福彩三d谜语| www.471944.com-彩钢扣顶板-| www.543209.com-河北快彩-| www.612687.com-如意彩网可以买彩吗| www.680797.com-幸运中彩票官网| www.cm7.com-北京福彩快三一定| www.526372.com-彩民彩票世界杯玩法| www.595607.com-彩票序列号-| www.066280.com-重庆彩票网-| www.965404.com-百盈快三技巧顺口溜| www.ak2.cc-江苏快三开奖结果走| www.xt54.com-盈利彩下载-| www.44iy.com-46彩下载-| www.1476.org-时时彩博客-| www.784358.com-在手机上买七星彩| www.862126.com-手机版幸运彩| www.939161.com-xy77彩票app| www.988042.com-福建体彩网官方首页| www.ai80.com-彩6彩票手机端| www.va86.com-幸运彩幸运二任选| www.662112.com-江苏体育彩票网站| www.784489.com-太公鸡七星彩| www.cp557.com-彩票黑平台排名| www.uv12.com-中福快三平台好不| www.hw00.com-十分快三是国家统一| www.za89.com-福彩十选五合法吗| www.19gh.com-网上买卖彩票合法吗| www.505202.com-彩票网站首充送彩金| www.593359.com-乐彩城彩票平台| www.752730.com-玩儿彩票软件| www.866597.com-福彩什么时候开奖间| www.546666.cc-彩票中的ag是什么| www.707637.com-专业大发快三回血| www.862369.com-彩票机原理-| www.974362.com-福彩礼拜几开奖| www.sp1.com-上海体彩领奖地点| www.72sv.com-中华购彩网-| www.2437.pw-彩票翻倍稳赢| www.355074.com-彩乐乐遗漏快乐扑克| www.458777.com-海南四星彩网站| www.60554.com-51彩虹登-| www.019834.com-彩之星江苏快3主页| www.bg23.cc-彩678是真是假| www.rq72.com-乐彩赢骗局-| www.890389.com-全民彩票网app| www.963952.com-风雨彩虹是什么意思| 500万彩票www.39500l.com| www.826637.com-98彩是真的吗| www.900204.com-广东体彩粤11选5| www.957079.com-北京福利彩票开奖| 大赢家彩票www.346511.com| www.860459.com-贵州彩票11-| www.941600.com-eg彩票平台导航| www.988377.com-副利彩票开将结果| www.lt39.com-分分时时彩软件| www.s77.top-福彩3d今晚开奖吗| www.36ss.com-时时彩在线黑马计划| www.97fv.com-29彩票-| www.20cl.com-体彩16号开奖结果| www.164422.com-cba彩票在哪买| www.371386.com-河内五分彩漏洞软件| www.279672.com-时时彩计算原理| www.465781.com-旺角彩网网址挂牌| www.0857.cn-优彩社区四不像论坛| www.9669.com-牛彩网图迷排列三| www.77qf.com-博彩业在五行中属性| www.280323.com-澳客彩票网信誉好吗| www.2zc.cc-彩票22是什么平台| www.629327.com-幸运彩票安卓| www.750116.com-掌上彩票苹果| www.815185.com-燕赵福彩排五走势图| www.886358.com-玩彩吧app下载|