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.587601.com-旺彩双色球软| www.327.tv-中发彩票安全吗| www.372708.com-怎样网上投注福彩| www.227711.com-手机上买彩票可靠吗| www.522200.com-8k彩票多少人中过| www.192560.com-最正规彩票平台| www.337252.com-福利彩票开奖日期| www.230815.com-彩运8靠谱吗| www.22807.com-3d福彩牛人-| www.01hu.com-美丽的彩虹-| 大赢家彩票平台www.210715.com| www.417122.com-体彩彩票站几点关门| www.0ol.com-成语添光溢彩| 凤凰彩票www.88266n.com| www.329319.com-双色球手机牛彩网网| www.199812.com-快三追号倍投计算器| www.025871.com-百胜彩票苹果app| www.27be.com-11选5360彩票| www.2527.win-重庆体彩地址| www.974358.com-一分钟3d福彩| www.di56.com-山东有快三吗| www.985390.com-时时彩人工计划网站| www.0191.top-国丰彩票安全吗| www.444524.com-中国福利彩票六加一| www.14pr.com-体彩排三跨度走势图| www.pp59.com-体彩官竞-| www.176307.com-百盈快三的规律| www.537028.com-168彩票官方网址| www.625876.com-超级全才彩票情结| www.703093.com-天天空彩-| www.qp21.com-ig彩票官方网站| www.00244.cc-瑞祥彩票网址| www.ni34.com-足球500网胜负彩| www.191019.com-彩票开奖查询彩| www.428164.com-体彩足球任选九过滤| www.620167.com-釉上彩颜料-| www.743399.com-735彩app-| www.874176.com-体彩基诺游戏| www.949137.com-中国福利彩票传统彩| 天下彩www.451770.com| www.55yi.com-陕西省福彩中心图片| www.93fb.com-如何把彩票卖好| www.890000.com-nba博彩-| www.959988.com-足彩职业-| 68彩票www.68689p.com| www.217055.com-哪些省份有快三彩票| www.382805.com-360足彩指数| www.588028.com-购彩v,邀请码| www.582052.com-冠军彩票登录| www.682638.com-彩票店开微信| www.777856.com-彩票漏洞软件| www.098.in-彩票5行官方网站| www.816271.com-易利三分彩开奖| www.174462.com-快三计划群真的吗| www.654042.com-cc12彩票-| www.792516.com-福彩e网-| www.903990.com-租彩票app-| www.989266.com-乐彩彩票软件| www.lj51.com-全民彩票能玩吗| www.81224.com-昨天彩票号码| www.993606.com-足彩开奖时间是几点| www.cb45.com-抓黑彩需要什么证据| www.290024.com-内蒙古时时彩最新| www.947031.com-北京朝阳区体彩中心| www.cn26.com-福彩三d双彩论坛| www.37uk.com-彩票双色球幸运奖| www.153640.com-旺彩号码库-| www.273643.com-福彩王素英视频| www.278144.com-qq快三开奖结果| www.372370.com-作弊重庆时时彩| www.518080.com-一分钟大发快三| www.594488.com-彩虹连接-| www.670888.cc-星彩3论坛-| www.4665.biz-体彩大乐透守号中奖| www.254512.com-十一选五上海爱乐彩| www.sy59.com-生肖彩票哪里买| www.60um.com-91彩票官网首页| www.998.com-七星彩的数字对数| www.62759.com-雪缘网足彩比分直播| www.82273.com-网上买彩票是骗局吗| www.455432.com-福乐彩票-| www.10xs.com-澳客赢家彩票安卓版| www.784224.com-众彩网登录-| www.973349.com-彩虹岛职业-| www.lg6.cc-快三彩票网站大全| www.yq02.com-吉林市福彩大奖| www.50pg.com-新快三外围庄家| www.625988.com-附近福彩点-| www.58176.cc-官方彩gz-| www.3796.wang-七星彩规律论坛| www.346666.com-好彩客彩票合法吗| www.166676.com-快三平台大发| www.545551.com-福彩30选五-| www.609786.com-华东福彩开奖| www.03073.com-沉迷彩票倾家荡产| www.689933.com-5分彩计划平台| www.6652.top-6合万彩-| www.383380.com-彩票中奖金额分别是| www.870280.com-押大小是什么彩票| www.531065.com-18号体彩开奖号码| www.79298.com-体彩线上投注| www.5562.cc-上海福彩开奖| www.342008.com-七乐彩刘远-| www.526652.com-时时彩后二组六| www.588342.com-体彩七星彩怎么开奖| www.bi21.com-各种彩票投注大厅| www.6951.pw-红8彩票平台| www.1gc.com-体彩周日开什么| www.10ho.com-网冠彩3dd-| www.89uh.com-手机老收到博彩短信| www.352.tv-我爱彩票登陆| www.615362.com-体彩七位数中四位| www.629.in-正版香港论坛彩票| www.07579.com-澳彩篮球赔率| www.5988.mobi-体彩赛马-| www.1dk.cc-七乐彩票怎么样| www.626670.com-数字彩票新浪彩票| www.697487.com-彩票之家与免费大全| www.772956.com-快3和值中奖彩票图| www.856038.com-台北快三计划网址| www.952920.com-大发时时彩是真的吗| www.cai557.com-快三单期计划| www.127117.com-彩色铅笔风景画教程| www.188946.com-内蒙古福彩官网| www.186117.com-十分钟一期的快三| www.04am.com-彩票胆是什么意思| www.92716.com-jc聚彩彩票平台| www.44tz.com-竞彩足球赚一百万| www.200096.com-七乐彩开奖直播| www.348969.com-天福彩-| www.444484.com-福彩3d的规则| www.0069.pw-欧洲有几种彩票| www.220293.com-禁止互联网销售彩票| www.305957.com-网上买彩票对实体店| www.nf1.com-快三大小-| www.ie26.com-中国竞彩比分直播网| www.93538.cc-乐彩网3d带连线| www.37044.com-好彩票官方版hpc| www.6ag.com-彩票分析算法| www.732979.com-江苏体彩网站点申请| www.116789.com-彩乐乐杀和值尾| www.259736.com-福彩双色球机选| www.22613.cc-快三是有人控制嘛| www.023211.com-福彩10选8骗局| www.7384.cm-足球彩票店的装修| www.173762.com-十大博彩信誉| www.194631.com-安徽快三预测平台| www.301609.com-万彩吧6合资料下载| www.509157.com-广发团队玩彩票| www.703639.com-深圳福彩官网登录| www.863812.com-吹吹七星彩交流专区| www.761927.com-庄家克星时时彩| www.977365.cc-福彩3d定位胆技巧| www.la19.com-老快三开奖统计图表| www.lh11.com-中彩彩票是什么| www.042.cm-网上代打彩票违法吗| www.37397.cc-多多彩票平台| www.695339.com-竞彩足球合买投注| www.836409.com-福彩三弟太湖谜语| www.961999.com-博兴铝板彩涂厂家| www.651143.com-陈流风景水彩| www.771621.com-手机怎么买时时彩| www.134722.com-解福彩臧机图| www.457504.com-六开彩诗句-|