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.922365.cc-上海竞彩分析师招聘| 易彩集团www.25688f.com| www.97758.com-三宝生活体彩屋| www.8913.biz-七星彩开奖提醒| www.42wi.com-彩票走势图格式| www.7995.top-托班彩虹伞游戏玩法| www.41111.com-下载中彩网_中彩网| www.05670.com-义乌市体彩中心| www.691.in-体育七星彩几点停售| www.ju59.com-彩客网完整版| www.mr88.com-k彩福地线路测速| www.87137.com-3d彩图总-| www.22830.com-王者彩票会赢吗| www.jo92.com-彩票软件风云榜| www.690309.com-7乐彩开奖号| www.780081.com-福彩3d规律视频| www.4794.com-彩六直播哪个平台看| www.77vw.com-美国有啥彩票| www.123002.cc-欢乐彩大发快3| www.758200.com-高盛彩票可信度| www.54rk.com-中大奖彩票下载安装| www.732290.com-春秋彩票app| www.946503.com-中国福利彩票六加二| www.fv78.com-英国时时彩官网| www.3502.com-江西快三彩票下载| 福彩网www.60007n.com| www.98500.cc-时时彩号码计算工具| www.365033.com-体彩是骗人的吗| www.15uy.com-江苏快三倍投计划表| www.2012.cm-时时彩四星缩水安卓| www.63565.com-山东彩礼排行| www.8110.cm-彩票领奖时间限制| www.12ni.com-看彩吧加入微信| www.86vb.com-福彩中龙图片大全| www.732311.com-福彩中奖新闻| www.1530.vip-彩票兑奖到账时间| www.0826.in-足彩不能网上买吗| www.44798.com-中彩网6000点| www.189308.com-宁夏快三官网| www.360200.com-竞彩总进球数玩法| www.28ur.com-彩票之神陈华双色球| www.153428.com-百彩网h+k手机网| www.246148.com-怎样买易彩快3能赢| www.08ie.com-彩铅画动物教程仓鼠| www.679915.com-至尊彩下载到手机| www.732569.com-福彩3网上投注| www.970230.com-彩神通彩票预测软件| www.y45.xyz-西安福利彩票号码| www.27fn.com-体彩11选5彩票| www.237185.com-体彩虚拟足球| www.330727.com-网赌彩票为什么输| www.130879.com-福彩快三专业版| www.099940.com-k8彩不给提现| www.162513.com-彩票乐娱平台哪个好| www.238015.com-安徽快三奖金规则| www.112677.com-七星彩历年开奖查询| www.298188.com-网上快三害了多少人| www.409543.com-七星彩画图软件| www.67ms.com-江苏老快三推荐| www.737944.com-毛涛彩票-| www.865726.com-彩票分析预测下期| www.522427.com-韩国分分彩精准计划| www.918291.com-重庆彩票网-| www.wb86.com-彩票排五开奖查询| www.215.cc-吉林快三黑彩赔率| www.23457.com-五分彩实时走势图| www.176040.com-快三计划软件苹果版| www.05qr.com-水溶性彩铅画樱花| www.85432.com-彩票选号的铁律| www.141645.com-深圳福彩3d论坛| www.902650.com-快三多长时间开奖| www.972232.com-大众彩票合法吗| www.cp6993.com-江苏快三刷流水骗局| www.361066.com-福彩高管贪污| www.324848.com-海南四码彩票技巧| www.446114.com-爱乐逶彩票网| www.570789.com-自己可以发行彩票么| www.660669.com-福建体彩最快直播室| www.bb16.com-体彩大乐透兑奖流程| www.t77.cn-彩票推广拉人| www.662727.com-重庆老时彩下载| www.789572.com-竞彩上下盘什么意思| www.907750.com-七星彩怎么算中奖图| www.978794.com-香港中彩彩票公司| www.cc19.cc-吉林快三盘在哪买| www.8552.site-澳门彩票公司| www.198.bid-乐彩站是赌博的吗| www.6084.cm-彩票全包打法| www.pn75.com-湖北精彩10分规则| www.613257.com-南洋马来西亚乐和彩| www.109619.com-重庆时时彩挂机工具| www.226053.com-福利彩票追号技巧| www.440480.com-幸运彩票网址是什么| www.656638.cc-万利彩票会被骗吗| www.871326.com-赢彩彩票下载| 160彩票www.160wt.com| www.07656.com-今天福彩3d图纸| www.574919.com-大发快三回血贴吧| www.228533.cc-易彩快三整合和值| www.868658.com-易彩网靠谱吗| www.944149.com-信彩票骗局-| www.990738.com-锋彩直播手机版| www.cc90.cc-彩票规律计算公式| www.yf54.com-七星彩历期开奖号码| www.42bd.com-爱尔兰彩票官网| www.4089.com-90304期体彩| www.905568.com-快三跟计划买靠谱吗| www.980983.com-七彩的寓意-| www.wd.cc-皇都彩票快3群主| www.pp75.com-彩票争霸8苹果| www.089064.com-重庆福彩时时彩| www.378096.com-汇彩国际彩票注册| www.575342.com-体彩过年开奖时间表| www.700037.cc-五分时时彩有托吗| www.295336.com-七了彩开奖结果| www.820522.com-南国论坛七星彩图规| www.974030.com-信誉彩票网1966| www.1dj.com-怎么分析彩票| www.581139.com-南海网七星彩票中心| www.914218.com-乐彩网工具图| www.690601.com-竞彩篮球购买| www.808075.com-竞彩足球资讯中心| www.917689.com-送彩金赌博-| www.64806.com-竞彩投资计划表| www.024421.com-福彩3d五行杀号| www.272862.com-福利彩票刷流水真吗| www.652355.com-彩票竞彩网靠谱吗| www.776591.com-福利彩票排列三| www.550648.com-买彩票中了一万| www.39239.cc-网络彩票作假吗| www.386356.com-玩运彩即时比分直播| www.779048.com-苏州体彩中心官网| www.890855.com-快三一天开几期| 创世纪彩票www.36787g.com| www.548604.com-彩票137app-| www.50342.com-手机版时时彩ios| www.0945.net-海南快三是骗人的吗| www.7776.loan-彩霸王·论坛高手大| www.28598.com-彩票和股票哪个好| www.394885.com-彩虹qq代刷网| www.504888.cc-人生没有彩排例子| www.585436.com-有什么送彩金的网站| www.419419.cc-港版绿好彩哪儿有卖| www.608393.com-彩运指走势图手机版| www.070044.com-体育彩票中奖图片| www.300113.com-双色球彩票指南彩报| www.026195.com-黑彩平台制作| www.172209.com-江西快三彩票| www.7527.loan-彩票店内还可卖什么| www.346678.com-彩铅画作品动物| www.601948.com-七星彩宣传图片大全| www.990857.com-旺彩百家是哪个平台| www.u67.net-唐山彩票站转让| www.51382.com-线上彩票代理加盟| www.41349.com-中国福彩彩票走势图| www.164004.com-彩票容错预测| www.480155.com-七星彩中奖中奖规则| www.556058.com-彩票免费书籍| www.613413.com-网恋女友玩彩票| www.7758.com-二分彩坑吗-| www.84574.com-彩钢板怎么安装视频| www.781875.com-大乐透走势图彩元网| www.071939.com-彩票点-| www.670640.com-内蒙古彩票中奖者|