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.37132.cc-zc38中彩-| www.035009.com-福福彩3d开奖结果| www.116117.com-75彩票平台可靠吗| www.956958.com-hhk百彩网-| www.453999.com-复合彩光祛斑| www.595764.com-快三稳赚包赔计划| www.703028.com-三位数都有什么彩票| www.ym32.com-生肖彩票-| www.41246.com-彩宝彩票电脑版| www.363702.com-六色彩虹是什么意思| www.951008.com-山东省福彩中心地址| www.wq30.com-高频彩开奖查询| www.1625.pw-上海彩亿能买彩票吗| www.ka39.cc-破解彩票数字规律| www.230041.com-幸运时时彩开奖记录| www.160190.com-传奇彩票平台| www.254443.com-中原彩票下载| www.028425.com-新博瑞彩票正规吗| www.875092.com-258竞彩官网| www.915565.com-买3d彩票怎么买| www.vs32.com-福建省体育彩票论坛| www.626.date-彩票佣金任务| www.041883.com-美国彩票大奖排行榜| www.506507.com-宝乐彩票我的账户| www.71384.com-四川福彩领奖地址| www.44059.com-幸运分分彩计划| www.027176.com-江苏快三开奖奖金| www.881206.com-开设私彩网站| www.183837.com-北京快三开奖查询| www.a67.net-盛大彩票官网| www.g53.club-星彩网论坛-| www.002267.com-七乐彩复式8中6| www.581129.com-33彩票安卓版下载| www.902331.com-福彩安徽基本走势图| www.kj5.cc-湖北福彩快三官网| www.301290.com-苹果彩票下载| www.ek46.com-快三最好的预测软件| www.019780.com-优信彩票下载| www.227011.com-彩铅画图片大全花草| www.349654.com-够力五星彩奖表| www.685414.com-福彩3d字谜之家| www.775919.com-国民彩票登录| www.871332.com-最高倍率彩票网| www.974477.com-福彩d开奖号| www.gf68.com-体彩七星彩玩法| www.77363.com-快三注册推荐代码| www.074368.com-如何从手机买彩票| www.34952.com-彩53彩票网注册| www.9858.com-古建彩绘图样| www.109032.com-胜负彩新浪完全数据| www.s49.bid-查福彩开奖情况| www.239942.com-五百彩票app| www.823482.com-彩涂铝卷多少钱一吨| www.911772.com-福彩彩票3d怎么玩| www.984546.com-亚博彩票登录网站| www.ge79.com-一分钟快三投注平台| www.nm67.com-福彩助手下载| www.034901.com-合肥福彩中心在哪| www.010197.com-彩票加盟店-| www.991500.com-安徽福彩下载| www.289208.com-怏3彩彩票-| www.717438.com-彩铅绘画技法| www.112180.com-注册送彩金的街机| www.922922.cc-玩体彩能赚钱吗| www.884049.com-黑彩每天赚钱| www.ac00.com-彩票开奖结果彩宝贝| www.wl36.com-手机彩膜-| www.31cg.com-彩票三位数开奖结果| www.3033.cm-快三根据什么开奖| www.501153.com-迷彩虎军事-| www.og86.com-皇都彩票安卓登录| www.04bm.com-彩票搜索引擎一彩搜| www.3535.cc-澳门赠送彩金网站| www.291139.com-福彩五行走势图| www.171081.com-体彩11选3-| www.45039.com-电玩挣钱软件送彩金| www.130974.com-河南彩礼超2万| www.378927.com-k彩2·0下载| www.525607.com-重庆福彩幸运农场图| www.078727.com-七星彩结束时间| www.700028.com-能在足彩中赚钱的人| www.797865.com-博彩系统搭建平台| www.873085.com-福彩旗下-| www.934025.com-即时开彩怎么下载| www.999114.com-福彩3d天宇内部报| www.vr4.cc-华人彩票—官方网站| www.os98.com-中国福彩开奖规则| www.06ji.com-福彩3d33期-| www.73is.com-炫彩背包解锁颜色| www.964018.com-彩帝彩票靠谱吗| 博友彩www.732779.com| www.6387.biz-常德福彩中心| www.010441.com-网易彩票官方版| www.82290.com-sk国际彩票骗| www.5116.vip-金龙系统彩票| www.06263.com-体彩跨度遗漏| www.74892.com-彩铅画花简单| www.554513.com-中彩3d詹天佑预测| www.640032.com-中国彩票22选5| www.712977.com-广东省福彩网| www.781037.com-竞彩8串8容错几场| www.843938.com-彩票市场谁监管| www.897637.com-彩票广告贴怎么弄| www.954264.com-老时时彩时时中彩票| 惠民彩票www.hm3788.com| www.we6.cc-买彩票屠龙是啥意思| www.or23.com-彩票中奖后怎么领奖| www.20275.com-万达时时彩官方平台| www.22716.cc-广东福彩快乐彩输| www.80816.cc-福彩视频彩票| www.87ts.com-十分快三软件| www.660478.com-彩票杀号计算公式| www.9492.top-今天体彩字谜多少| www.763175.com-下载富贵彩票| www.93297.com-看一下江苏快三| www.061776.com-好彩客提款提不了| www.356151.com-分分彩自动挂机稳赚| www.34495.com-正规购彩app| www.027797.com-玩彩票输光-| www.187968.com-福利彩票彩种下载| www.14ew.com-福彩在线直播开奖| www.567101.com-彩虹儿童画图片大全| www.286829.com-大淘宝彩票-| www.420202.com-彩票店内图片| www.527524.com-香港好彩网资料大全| www.701796.com-网络黑彩套路| www.779646.com-135彩票网站| www.835011.com-焕彩桌面免费版| www.910091.com-粤彩联盟报纸| www.973942.com-508彩票-| www.cp9311.com-河北快三一定牛推荐| www.pg00.cc-谁有吉林快三群拉我| www.947956.com-福彩3d牛远志推荐| www.81lw.com-彩铅画花朵图片| www.29327.cc-彩经网排三走势图| 超级彩票www.901833.com| www.020435.com-o38彩票app-| www.443307.com-3dmax彩通图| www.023876.com-怎么从彩迷中走出来| www.168544.com-内蒙快三形态走势图| www.331431.com-天天彩票软件合法吗| www.466335.com-全球彩票最新版| www.668375.com-菲律宾线上彩票公司| www.776023.com-玩时彩欠钱案例| www.860324.com-577彩票下载| www.929320.com-福彩群英会app| www.992975.com-足彩胜负十四场开奖| www.pr86.com-go彩平台-| www.64jl.com-众彩网是什么东西| www.70mf.com-七乐彩奖池查询| www.3154.live-彩票怎么查看| www.344411.com-福利彩票如何买| www.465348.com-体彩高频彩有哪些| www.617259.com-彩票辅助器可靠吗| www.63361.com-足彩推荐310| www.922967.com-亚盘500彩票| 天下彩www.634679.com| www.24808.com-彩色铅笔画的好处| www.79246.com-微信登录天天中彩票| www.839053.com-彩色纸箱定做厂家| www.925352.com-代理手机彩票平台| www.15uo.com-900万彩票下载| www.731895.com-彩票代打佣金50| www.919489.com-时时彩平台搭建流程|