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.963636.com-足彩彩票怎么买| www.m16.xyz-体彩排列三四机号| www.869248.com-今天福彩3d试机号| www.366417.com-彩铅手绘人物写实| www.138479.com-竞彩大赢家实体店| www.1124.cn-周六足球竞彩| www.968046.com-哪个平台有河南快三| www.271236.com-好彩烟黑黄-| www.045484.com-彩神通代理商| www.7443.top-上海市体彩网| www.717547.com-彩铅人物笔法| www.817510.com-福彩30期开奖号码| www.897888.cc-彩票店标语-| www.964431.com-快三第一用户登录| VIP彩票www.382688.com| www.60441.com-腾讯分分彩必中方案| www.350317.com-彩票78500-| www.900039.com-天天中彩票旧版本| www.976627.com-山西长治彩礼价格表| www.dd11.cc-人人爱彩票官网下载| www.a49.cc-七乐彩走势-| www.38wm.com-彩民在线频道观看| www.56713.cc-亿万彩票可靠吗| www.706538.com-嘉兴体彩招聘| www.146448.com-亚盘足彩网-| www.99391.cc-首选500体彩网| www.823928.cc-乐彩网p3字谜| www.206463.com-福彩十二选伍快乐彩| www.361228.com-捏彩泥大全-| www.16586.com-重庆时彩投注客户端| www.2209.cc-售彩色复印机租赁| www.025966.com-福利彩票的方法技巧| www.878137.com-分分彩倍投方案| www.507152.com-非凡彩票走势图表| www.lr75.com-中华彩票网站| www.787168.com-江苏快三导师计划网| www.728608.com-体彩网app安全吗| www.365.name-大胜彩票最新消息| www.920571.com-588彩票开奖查询| www.983033.com-怎样用手机购买彩票| www.ck55.cc-智能彩票算号器| www.541033.com-彩贝壳电话打不通| www.704.com-私彩代理如何赚钱| www.41328.com-速赢彩app下载| www.365893.com-彩铅渐变色怎么涂| www.090639.com-分分时时彩软件下载| www.183114.com-七天彩票官网| www.360514.com-体彩任五中奖规则| www.509229.com-七星彩能不能机选| www.602076.com-彩票包赢-| www.735077.com-最新专家说彩| www.730212.com-78彩票登录-| www.836342.com-计算器竞彩足球| 500万彩票www.89wcp.com| www.sd.com-彩票开奖湖北快3| www.tw68.com-竞彩真正的国内高手| www.27ue.com-缅甸时时彩合法吗| www.nj8.cc-上海快三开奖助手| www.874441.com-亚博彩票网站下载| www.974289.com-七乐彩票游戏规则| www.42uq.com-彩票可以复制出来吗| www.536285.com-彩票名字大全百度| www.271547.com-中原彩票如何登录| www.47888.com-好彩网怎么样| www.93832.com-足彩解读-| www.005510.com-福利彩票趋势| www.869782.com-唯彩会三d-| www.163048.com-宝彩-| www.302213.com-南国彩票七星彩图规| www.454311.com-南洋五合和彩开奖一| www.32289.com-彩色包装纸箱厂家| www.746263.com-彩贴吧49949| www.863532.com-怎么举报彩票网站| www.949043.com-98双彩网-| 吉利彩票www.80065n.com| www.93wl.com-彩吧论坛3d专栏| www.5232.biz-彩票店几点开| www.21196.cc-七星彩彩票百度贴吧| www.697371.com-七星彩网开奖结果| www.984204.com-福彩新彩网新| www.ld7.cc-e球彩走势图| www.nh69.com-竞彩官网首页| www.k44.net-福彩十分快三遗漏| www.42gc.com-哪里买足彩靠谱| www.99ez.com-彩票平台黑钱怎么办| www.2401.com-中国体彩网页版| www.7888.loan-成都体彩开奖结果| www.053993.com-海南体彩app下载| www.230123.com-共享彩票邀请码| www.34rr.com-成都彩票通软件下载| www.98hp.com-3d炫彩壁纸-| www.2496.pw-如何购买足球竞彩| www.8808.link-分分彩是官方开的吗| www.797086.com-福乐彩网-| www.863041.com-智慧彩票预测软件| www.915579.com-彩九app下载安装| www.967111.com-开体育彩票店抽成| 福彩www.26878b.com| www.br71.com-一分快三计划网址| www.799744.com-彩票的中奖号码查询| www.569603.com-福彩快3改革| www.9249.hk-注册初级彩票培训师| www.189476.com-彩3彩票-| www.125663.com-玩彩票输了怎么回血| www.tx30.com-多彩乐江苏快三| www.61050.com-七乐彩模拟选号器| www.018910.com-彩富网最快报码室| www.102639.com-好彩1数字走势图| www.13tk.com-好彩一开奖结| www.08401.com-福彩3d模拟投注| www.84269.com-体育彩票多久领奖| www.362238.com-彩色-| www.502872.com-爱投体彩店-| www.617173.com-彩票大奖被冒领| www.750311.com-九歌彩票手机客户端| www.831006.com-快乐彩玩法说明介绍| www.925593.com-金彩网骗局-| www.cai8133.com快三开奖查询江苏| www.xd56.com-彩票快三玩法方法| www.253815.com-华人彩票app下载| www.225557.com-百合彩票-| www.312811.com-鑫彩晨led显示屏| www.367586.com-西安三彩家-| www.519062.com-彩票是谁的-| www.662469.com-全民彩票金币| www.iq56.com-宁夏快三开奖走试图| www.547008.com-加好友买彩票| www.502000.com-棒棒彩票没人查吗| www.sn02.com-虚拟足球e球彩开奖| www.1vl.com-快三怎么玩不会输| www.086259.com-凤凰彩票lll| www.gh11.com-新彩票快三-| www.eu8.com-时时彩看号规律| www.272137.com-官网彩票下载安卓| www.393018.com-彩铅画图片人物动漫| www.569601.com-彩票员打票怎么弄| www.683451.com-5000彩票平台| www.190813.com-河北省快三走势图表| www.358841.com-彩票一般买什么保险| www.mp80.com-六星彩开奖结果查询| www.694626.com-808福彩怎么样| www.478625.com-深圳彩票开奖| www.728257.com-上海体彩网点查询| www.905393.com-足彩任九吧-| www.22zp.com-查体彩7星彩| www.770942.com-开彩之家-| www.853027.com-香港有哪些彩票| www.926201.com-瑞彩祥云彩票可靠吗| www.983914.com-彩99能提现吗| www.cp458.com-分分快三开奖实时| www.265689.com-快三代理按什么挣钱| www.8270.cc-台州福彩官方网| www.18408.com-牛娃彩票导航首页| www.03587.com-七星彩微信交流群| www.547773.com-最赚钱的时时彩软件| www.653591.com-玖富彩票怎么下载| www.823584.cc-彩票360数字大厅| www.929897.com-七星彩但杀-| www.p63.net-幸运星座彩票玩法| www.c1.la-快三开奖app| www.930.gg-村里福彩申请条件| www.22856.cc-导师带你进群买彩票| www.019227.com-县级彩票管理员| www.cp646.com-人人彩票-|