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.1412.com-pg66苹果彩票| www.098180.com-国彩网网址-| www.81yy.cc-竞彩双平是啥意思| www.cai916.com-北京快三走势图表| www.191308.com-分分快三怎么看走势| www.343475.com-彩票试玩软件| www.535129.com-六位数字是什么彩票| www.695754.com-竞彩足球m串n组合| www.842225.com-福彩资金分配比例| www.cp9659.com-宁夏快三开奖在哪看| www.989828.com-人人红彩票软件下载| www.04zk.com-校园一角彩铅画| www.09095.com-天禧彩票骗局| www.874177.com-福彩基诺-| www.582326.com-头头奖彩票-| www.989430.com-乐彩网彩票是骗局吗| www.974115.com-福彩3d图纸解密| www.420862.com-体彩店怎么装修好看| www.675489.com-福利彩票红球走势图| www.875337.com-手机上可以玩的彩票| 天际彩票www.tj92.com| www.80466.com-重庆时时彩算赌博吗| www.674896.com-彩票属于哪个部门管| www.ki44.com-竞彩赛果-| www.13pd.com-好彩炸金花-| www.257244.com-中彩票后的真实故事| www.332969.com-世界彩票最大奖| www.404429.com-吉林快三几号停| www.511237.com-雨后彩虹类似的网名| www.582438.com-福彩3d快三146| www.656906.com-大平台彩票网址| www.731126.com-易彩快3预测| www.803279.com-七星彩明月珰| www.875541.com-新疆时彩票开奖号码| www.937488.com-微彩是骗局揭秘| www.998799.com-中国体育彩票三等奖| www.aj57.com-168彩票开奖官网| www.wt88.com-人人中彩票网站| www.zn61.com-下载吉林省快三| www.30qb.com-腾讯分分彩预测方法| www.xx26.com-彩票中心买彩票流程| www.79hv.com-用彩泥做东西| www.qd96.com-93彩票-| www.3986.net-快5彩票合法吗| www.53671.cc-娱乐彩票软件下载| www.185328.com-好彩1-| www.pm33.com-福彩缩水软件下载| 500万彩票www.38wcp.com| www.dg31.com-深圳福利彩票彩种| www.540076.com-八号彩票论坛| www.685619.com-福彩家财网-| www.821323.com-大乐透彩乐乐幸运| www.939239.com-彩神网彩神论坛| www.xj.com-官方手机福彩投注| www.69568.cc-99彩票网靠谱吗| www.956810.com-彩泥小制作大全| www.06605.cc-华彩网是不是骗人的| www.96360.com-甘肃体彩11选5开| www.289606.com-快三有赚钱的吗| www.292509.com-北京快三网官网| www.4363.org-彩博士杀码-| www.156216.com-福利彩票七乐买法| www.159898.com-购彩大厅360彩| www.ov99.com-福彩3d惊天秘密| www.66619.cc-彩票梦想站-| www.022067.com-安徽快三直播| www.365334.cc-广东体彩征召| www.534349.com-分分彩和值怎么算法| www.132436.com-彩礼限高-| www.231338.com-天天彩票app网址| www.bx20.com-博彩推广技巧| www.088770.com-爱资料福彩门户惠泽| 中国福利彩票www.08588h.com| www.686332.com-时时彩三期必中计划| www.578468.com-福彩3d倍投-| www.3471.vip-爱彩乐天津11选5| www.45gb.com-彩票十分快三的公式| www.298517.com-吉林快三遗漏走势| www.29682.com-福彩网邀请码贴吧| www.386763.com-什么是掌中彩| www.551315.com-足球四场进球彩推荐| www.696060.com-传统足彩奖金怎么算| www.959522.com-幸运分分彩计划全天| www.dr46.com-新浪数字彩票双色球| www.zk55.com-038彩票pk-| www.33xq.com-大奖彩票网上购买| 亿万彩票www.730979.com| www.534899.com-够力七星彩图版| www.611469.com-长春福彩3d开奖号| www.331333.cc-彩81彩票下载| www.650870.com-固体水彩初学教程| www.827962.com-lg传统彩-| www.788790.com-8080c彩票开奖| www.565938.com-湖北彩票30选5| www.673791.com-古建天花彩绘| www.881717.com-彩票工资车哪里有| www.979125.com-北京哪里卖好彩香烟| www.xv94.com-d9彩票最新版下载| www.14sw.com-安徽彩票中奖| www.019457.com-福利彩票投资技巧| www.08066.cc-天下彩特彩吧喜中彩| www.64763.com-竞彩赌博-| www.844875.com-体彩甘肃11选| www.990485.com-大本赢彩票官网登录| www.001515.com-爱彩平台合法吗| www.06pp.com-周三竞彩开奖| www.201827.com-解福彩藏机图| www.110642.com-发彩信多少钱一条| www.237009.com-竞彩投注比例| www.759531.com-大中华彩票提现成功| www.bk45.com-大小单双彩票| www.zp08.com-赢钱彩从哪下载| www.0007.pw-6个号码是买啥彩票| www.703305.com-京彩彩票苹果手机版| www.185269.com-易彩快三有什么技巧| www.415361.com-足彩串关对冲| www.550302.com-管家婆彩图自动新| www.662193.com-太原足彩5800万| www.752058.com-亚榑彩票-| www.836023.com-丰彩娱乐app| www.927733.com-极速快三直播| www.984098.com-75彩票下载-| www.cp1673.com-福彩快三官网投注站| www.ob89.com-吉林快三官网下载| www.1630.net-kk彩票注册-| www.119347.com-彩神00-| www.28972.com-彩票奖金额度| www.102297.com-五分彩全国统一开奖| www.08249.com-湖南体彩投注站| www.334407.com-体育彩票排5历史| www.019045.com-利彩黑平台么| www.119717.com-乐彩彩票开奖查询| www.119448.com-268彩票下载安装| www.611066.cc-彩38彩票官网登录| www.689298.com-齐鲁彩票最近奖是几| www.789336.cc-强势竞彩app| www.908913.com-中福利彩票双色球| www.979959.com-买彩票快三-| www.gv50.com-彩16安卓版下载| www.01kt.com-本期七星彩头奖号码| www.187959.com-福利彩票彩种介绍| www.59204.cc-今天的福彩开奖视频| www.370108.com-天佑风采彩票| www.365428.com-彩铅画儿童风景| www.444177.com-福利彩票坐标走试图| www.531131.com-彩铅画和素描和水粉| www.593171.com-三重彩虹-| www.7338.biz-彩虹7隐身无人机| www.285750.com-安徽快三跨度表| www.4553.biz-乐彩客软件下载| www.338958.com-6698彩票-| www.69222.cc-众博官方彩票| www.191944.com-湖北快三大小走势图| www.7075.org-江苏快三一天几期| www.ub3.cc-甘肃快三玩法| www.pa13.com-即开彩-| www.052638.com-彩票网333-| www.137703.com-福利彩票新闻| www.280976.com-彩之家彩票登录| www.026733.com-辉煌彩票是正规的吗| www.216396.com-7星彩玩法开奖说明| www.419027.com-网上体育彩票禁止| www.566319.com-?彩票资料免费大全| www.698770.com-6加1彩票怎么买|