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天

知道了
1分快三 www.340064.com-金彩网靠谱吗| www.510666.cc-彩虹谷-| www.5444.in-彩虹世界app苹果| www.28856.com-万喜彩-| www.338464.com-湖北体彩投诉| www.480200.com-澳门快三玩法| www.900917.com-河北福彩排列五结果| www.975212.com-开心100彩票| www.pt3.com-派彩app-| www.389260.com-快三出龙最多多少期| www.535129.com-六位数字是什么彩票| www.635478.com-通博搏彩-| www.580754.com-长春彩票中心在哪| www.606326.com-足彩爆冷怎么预测| www.588323.com-委主任七星彩论坛| www.686918.com-福彩群英会彩友沙龙| www.790321.com-彩票中奖恶搞生成| www.900785.com-3d报纸彩版图| www.41455.com-彩票全部软件| www.95534.cc-澳客足彩网站| www.071133.com-招聘竞彩顾问| www.163461.com-国彩gc27966| www.27782.cc-福利彩票了3个号| www.823579.com-彩涂钢板型号规格| www.914891.com-彩神争霸是真的吗| www.981811.com-中国福彩中奖号码| www.40dc.com-彩乐乐好彩一预测| www.25217.cc-彩铅颜色渐变排序| 55世纪www.202115.com| www.342494.com-七星彩上期开奖结果| www.52619.cc-好彩无嘴烟-| www.046650.com-福利彩票店装修图片| www.200576.com-网易彩票网彩| www.325919.com-彩票开奖走势排3| www.62133.cc-彩票时时彩遗漏统计| www.751254.com-博牛彩票团队| www.898802.com-快三今日开奖号码| www.994129.com-辉煌彩票app下载| www.847576.com-专业快三福彩书籍| www.982324.com-日本彩票乐透6| www.pz90.com-体彩18125期| www.28ak.com-乐彩欢迎您-| www.11282.com-烟台福彩官网| www.n29.cc-京彩app挂-| www.366782.com-青蛙彩票香港开结果| 福彩网www.5522j.cc| www.mp20.com-时时彩回血平投| www.16qe.com-36选7好彩3公式| www.h32.com-七星彩兑奖时间多久| www.5555.hk-uc彩票网址-| www.42547.com-搜狗彩票骗-| www.259910.com-吉林快三走势图今天| www.606869.cc-时时彩看路数定胆| www.fw62.com-彩票托有真爱吗| www.2612.wang-惠盈app足彩| www.636388.com-彩虹无人机官网| www.872402.com-彩票推广代理加盟| www.693285.com-浙江快彩走势图表| www.953725.com-犀牛彩票不给提钱| www.zm28.com-内蒙古快三开奖时间| www.254721.com-体育竞彩足球app| www.334165.com-一号彩票-| www.400191.com-快三助理-| www.5198.in-腾讯彩票竞彩足球| www.91987.cc-顺丰丰彩-| www.8pi.cc-228彩票网站| www.1266.vip-三位数彩票有哪些| www.120124.com-河北福彩燕赵网| www.82gi.com-澳洲三分快三| www.41481.com-彩票程序源码| www.753172.com-3d真福彩早早报| www.3588.org-金沙377彩金| www.t28.in-七乐彩专家杀号汇总| www.766.cc-时时彩刷时间差| www.32734.com-快三可以网上购买吗| www.978421.com-郑州彩色沥青| www.92zn.com-云彩彩票店app| www.358341.com-体彩单场固定| www.949566.com-7乐彩票基本走势图| www.1109.pw-风云彩票计划集团| www.oc91.com-大发快三网址注册| www.316344.com-荣誉彩票-| www.8483.loan-2018彩票大奖| www.045125.com-福彩快三输钱的原因| www.313563.com-华夏彩票官网首页| www.565967.com-王牌的彩票软件| www.780232.com-梦删解梦七星彩大全| www.913601.com-好彩客平台正规吗| 乐彩网www.lcw997.com| www.493423.com-彩票有效期是多久| www.589826.com-体彩排列三高手预测| www.695278.com-彩票旗舰网下载| www.920497.com-幸运一分快三是什么| 梦想彩票www.33112e.com| www.6538.cc-江西体彩客户端下载| www.070696.com-河南商丘彩礼多少钱| www.96674.com-网上代玩彩票兼职| www.064044.com-致富彩官网-| www.623477.com-鼎顺彩票com| www.03yj.com-彩票网注册送彩金| www.fh80.com-77注册送27彩票| www.158420.com-足彩竞彩北单统计| www.wv35.com-免费送彩金38| www.1583.vip-彩票收藏-| www.010115.com-彩票专家分析预测| www.625692.com-开心8彩票安全吗| www.751155.com-彩票巴士计划| www.879144.com-新浪数字彩票排列三| www.984281.com-微信好友做高频彩| www.oj25.com-吉林省福彩电话号码| www.27wo.com-三彩集团骗子| www.361513.com-滴滴彩怎么玩| www.883805.com-彩票不中改中软件| 500彩票www.649477.com| www.39156.cc-7彩网是真的假的| www.610948.com-上海福利彩票赚钱吗| www.008323.com-3d开奖七乐彩开奖| www.nd54.com-最好娱乐购彩平台| www.v64.cn-上海快三计划微信群| www.42sb.com-批发彩钢围挡定做| www.003.bid-乐彩网大乐透净版| www.2317.cc-乐亿彩票怎么样| www.59911.com-拉菲彩票平台代理| www.11639.cc-彩播是啥意思| www.200659.com-手机彩票体彩福彩| www.28673.cc-买彩票就是赌博| www.000405.com-全民智投彩票| www.cs69.com-快三app正规平台| www.vp20.com-体彩e球开奖结果| www.53781.com-梦迷解图七星彩梦册| www.1274.org-乐彩网正规吗| www.54697.com-高频彩票北京投注| 众彩网www.88065c.com| www.j43.shop-福利彩票快乐十分法| www.22161.com-下载中国福彩官方网| www.579888.cc-进球彩app客服| www.28126.cc-彩票不中奖-| www.744618.com-华彩生活app官网| www.jj9.com-北京快三开奖网站| www.71uh.com-恒彩彩票登陆| www.895707.com-广东快三是官方的吗| 九五彩票www.959552.com| www.208382.com-今晚湖北快三开奖号| www.268985.com-快三数字组合| www.38979.com-大连彩票站兼职| www.671473.com-不衣彩吧-| www.281451.com-时时彩后三直选和值| www.693839.com-福利彩票宣传语征集| www.886136.com-快三豹子号要怎么守| www.998151.com-神州风采彩票靠谱吗| www.xn47.com-乐彩江苏快3技巧| www.778180.com-东西湖彩箱包装| www.099706.com-盈彩彩票是真是假| www.s81.cc-海南福彩快2技巧| www.3186.cn-api彩票源码| www.308327.com-彩票投注站网上缴费| www.731771.com-8k彩票官方-| www.290014.com-福利彩票奖金怎么算| www.521012.com-重庆时时彩进群| www.9kr.com-四川福彩手机报下载| www.333577.com-做营销可以送彩票吗| www.239258.com-大发快三有人控制的| www.315377.com-500彩票客服| www.2335.org-三分彩全天-|