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.341638.com-吉林快三微信| www.5319.cm-腾讯分分彩打法技巧| www.17566.cc-赢彩彩票app下载| www.159433.com-众博彩票下载| www.8891.net-足彩七串八-| www.441852.com-快三北京快3| www.533961.com-十分钟一出奖彩票| www.979349.com-江苏体彩大乐透预测| www.ze4.com-福彩快3怎么玩的| www.wm53.com-彩8下载app注册| www.367611.com-三彩家是什么公司| www.459855.com-福彩游戏跟单项目| www.495838.com-利记博彩公司网址| www.688114.com-广州铭彩电子| www.773855.com-彩39彩票提现次数| www.853495.com-海南私彩几点开奖| www.925627.com-金彩网下载-| www.ji98.com-吉林快三和值表| www.391808.com-2019彩市休假| www.828684.com-福彩自助投注机返点| www.951347.com-信誉高彩票网| www.hg80.com-彩票51中彩下载| www.810878.com-盈宝彩登陆-| www.175.red-手机话费咋买彩票| www.9444.in-体彩体彩图谜汇总| www.8863.club-有博彩专业的大学| www.60577.cc-cba彩票投注技巧| www.225663.com-马云买的彩票号码| www.344928.com-时时彩趋势软件| www.59mb.com-彩钢瓦机器生产厂家| www.223633.com-福彩3d有规律吗| www.334488.cc-万达彩票-| www.969303.com-梅州彩民中奖新闻| www.62653.cc-今晚七星彩开码结果| www.11em.com-北京5分彩人工计划| www.630889.com-体彩飞鱼中奖条件| www.7652.loan-正彩彩票下载安装| www.50566.cc-ag333爱购彩| www.365893.cc-体彩排列三跨度遗漏| www.523382.com-600彩票网站下载| www.547786.com-28彩票计划网| www.653653.com-玖富彩票登录网址| www.2472.vip-河北十一选五爱乐彩| www.10564.com-关小刀足彩任9预测| www.843077.com-福彩知识考试题| www.037352.com-休育彩票大乐透| www.359350.com-彩票真假怎么看| www.219483.com-高频彩票要取消吗| www.345307.com-快乐彩是多少赔| www.890750.com-至尊彩一-| www.961253.com-广州鸣彩传媒董事长| www.cai1588.com江苏福彩快三| www.553767.com-公益福彩亲情助学| www.659761.com-重庆时时彩又卡奖了| www.746022.com-彩票复试奖金计算器| www.0341.top-体彩双色球开奖时间| www.39461.com-彩57彩票-| www.654734.com-彩票代销证信息查询| 幸运彩票www.5095q.com| 七星乐www.535666e.com| www.088669.com-黑龙江福利彩票网| www.098158.com-双彩网3d字谜| www.172019.com-广西快三助手下载| www.375002.com-福利彩票3d广播台| www.vr37.com-北京前三直彩票下载| www.111366.com-乐猫彩票app下载| www.3681.wang-6开彩c8万彩吧| www.143310.com-彩票幸运选号在线| www.196323.com-中国手机彩票网站| www.277427.com-七星彩对三个数| www.588969.com-足球彩票单场二选一| www.668551.com-体彩图谜字谜| www.64885.cc-彩钢瓦补漏-| www.2255.live-彩票导师注册送钱| www.9789.loan-七星彩的中奖方式| www.uw84.com-广西体育彩票| www.26em.com-彩38app网站| www.r96.net-3d彩票有几种玩法| www.41uy.com-鸿发彩票网没有客服| www.21ih.com-彩票采集器图片| www.095162.com-外围足彩怎么投注| www.183056.com-安徽福利快三一定牛| www.96651.cc-彩票事业单位改革| www.cp3758.com-百盈快三怎么看走势| www.ca91.com-快三门户app下载| www.pu00.com-uu彩票-| www.12285.cc-鸿博彩票-| www.80362.com-易迅彩票可以买吗| www.7170.cc-买时时彩有发财的吗| www.62611.com-全民竞彩电脑下载| www.6955.cm-收米拉竞彩是什么鬼| www.21637.cc-彩彩大咖直播| www.84so.com-青蛭彩票开奖现场| www.16204.com-正版神马报幸运彩| www.094368.com-14彩票-| www.99md.com-排三乐彩网胆码预测| www.5111.hk-七星彩一夜谈六个尾| www.10364.com-新浪爱彩不能买了| www.45021.com-87彩票实体店| www.88219.cc-彩民堂软件计划下载| www.029726.com-彩票倍投循环模式| www.101556.com-彩票信誉平台推荐| www.166029.com-被关掉的彩票黑平台| www.237450.com-快三群里的全是托吗| www.301051.com-彩票精准计划软件| www.226763.com-彩20app-| www.365250.com-体彩p3速查-| www.443568.com-澳门赌彩-| www.519366.com-256老彩票-| www.582733.com-万达彩票网站| www.639407.com-怎样经营好体彩店| www.544786.com-奥淘彩票abb| www.610385.com-福彩神8-| www.679659.com-魔方彩票苹果下载| www.741034.com-幸运彩票计划群| www.806256.com-中彩在线提现不到账| www.870573.com-彩票投资计划| www.945766.com-福建体彩中心| www.989363.com-彩漂伤皮肤吗| www.jn4.com-河北快三平台下载| www.561199.com-金牛彩票是正当的吗| www.650332.com-nba篮球博彩| www.399000.com-网上那些彩票代玩| www.qp32.com-北单单场足彩| www.8aa.com-员工年会彩票| www.59bt.com-派彩甘肃快三走势图| www.0409.cn-酷彩网是骗人的嘛| www.9249.xyz-微信登陆彩票| www.534198.com-七星彩选号计算公式| www.619405.com-幸运五星彩网站| www.520602.com-快三是如何开奖的| www.1322.in-彩乐爆是正规的么| www.6372.top-武威市福彩中心| www.122616.com-彩神512i喷绘机| www.86649.com-竞彩猫艾薇微博| www.42cd.com-怎么看自己买的彩票| www.2211.top-三地福彩短租| www.938.la-三国杀张星彩皮肤| www.017261.com-凤凰彩票平台合法吗| www.136910.com-武汉体彩中心旗舰店| www.289949.com-奔驰彩票是合法的| www.390696.com-玩大发彩票能赢钱吗| www.549110.com-线上买足彩怎么买| www.661437.com-男子算彩票概率获刑| www.761639.com-竞彩足球竞彩版官网| www.181.pw-初二彩铅画动漫人物| www.5091.biz-中国彩票历史最大奖| www.027971.com-彩票时差漏洞| www.753372.com-cp12彩票专业版| www.838.top-赢彩彩票玩的人多吗| www.654921.com-麒麟彩票app下载| www.731714.com-8k彩票规律-| www.826236.com-排列3两元彩票走势| 全民乐彩票www.2934j.com| www.762592.com-五分时时彩开奖计划| www.057763.com-福彩b今天试机询| www.987644.com-小米官网彩票代购| www.907128.com-四川成都快三查询| www.778509.com-彩乐汇下载安装| www.858034.com-深圳风彩票开奖查询| www.922193.com-人人彩票资料| www.975264.com-双色球彩票中奖图片| www.cp30.cc-精彩十分走势图| www.83uw.com-海南试点彩票资格|