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天

知道了
9彩注册 www.083730.com-福利彩票精准预测网| www.16615.cc-时时彩七码倍投方案| www.57576.cc-澳客赢家彩票苹果| www.lh18.com-u9彩app下载| www.662240.com-彩民网是什么网站| www.951746.com-竞彩中奖查询| 500彩票网www.65707t.com| www.jw0.com-快三二同号技巧| www.598641.com-七星彩历史开奖检表| www.28lk.com-信彩彩票登录| www.dy11.com-亿彩下载-| www.c26.top-博彩王彩票预测| www.602485.com-四季一分彩走势| www.720360.com-今晚彩票号码是多少| www.807576.com-福彩44期-| www.292448.com-q彩网怎么下载安装| www.379208.com-蜻蜓广播天天福彩| www.501415.com-彩票平台包网| www.576034.com-c77彩票下载| www.648850.com-彩色宝石种类| www.718028.com-彩库宝典图库版本| www.792212.com-福彩3d43期预测| www.879534.com-网易人人中彩票真伪| www.959675.com-买彩票刷流水被骗| 多乐彩票www.477070.com| www.280350.com-最新彩票开奖信息| www.368652.com-一号店彩票安全不| www.479818.com-足彩四场进球彩预测| www.87415.com-中国长城福彩| www.560548.com-kk彩票邀请码| www.288497.com-彩民研究彩票高手| www.366477.com-3g彩票是怎么买的| www.465189.com-彩票分几种玩法| www.664869.com-彩民之家心水坛| www.900837.com-赢钱彩合法吗| 吉彩www.318021.com| www.700311.com-必发彩票安全购彩| www.995559.com-竞彩和北单哪个好| www.up31.com-鸿彩网直播-| www.768.me-赢彩王免费软件| www.04197.com-买彩票工具软件下载| www.68657.cc-彩票100本回血| www.83812.cc-支付宝的彩分换彩票| www.yr.com-上海的快三走势图| www.073073.cc-奖金过亿的彩票| www.160259.com-原创福彩分析| www.229748.com-新彩票-| www.310754.com-3d彩票规律与技巧| www.4896.vip-福彩3d跟单-| www.639145.com-余姚体彩哪里申请| www.60969.com-博雅彩票投注站| www.098544.com-彩票有什么软件| www.883915.com-百姓彩票网投领导者| www.980723.com-彩票站怎么盈利| www.dp74.com-今日彩票开奖查询| www.m32.org-大发时时彩规律口诀| www.4570.top-中彩网糖果视频分析| www.2823.in-k8彩票软件下载| www.21273.cc-彩票复式买一个号码| www.026355.com-重庆高频彩中奖概率| www.169176.com-精彩十分开奖走势图| www.650759.com-什么是十字彩赌博| www.14ws.com-体育彩票qq号| www.540286.com-什么是足彩套利| www.974547.com-江苏福彩快三奖金表| www.354240.com-刮彩票中大奖视频| www.769209.com-好彩彩票下载官方版| www.88wp.com-985彩票网-| www.9110.site-福彩在线开奖视频| www.79198.cc-手机钢化彩膜怎么贴| www.073658.com-福彩双色球中奖新闻| www.706321.com-时时彩计算函数公式| www.687884.com-巴西快三辅助| www.98218.cc-香港分分彩分析| www.10tk.com-体彩22选5简介| www.976059.com-彩礼图-| www.2891.biz-分分彩在线计划| www.328000.com-福彩微信公众号| www.373711.com-巩义福彩-| www.504701.com-彩排的意思和造句| www.574462.com-电信彩铃官网| www.817168.com-比分开奖澳客彩票| www.881097.com-网络彩票黑平台排名| www.77945.com-六堂彩天空彩票大全| www.742000.com-彩票730-| www.co95.com-河北快三玩法说明| 3G彩票www.c135.vip| www.086555.com-开心彩票-| www.264500.com-购彩票网众-| www.343201.com-彩神网火爆4肖| www.418255.com-鼎盛买彩票正规吗| www.77943.com-买福彩选号技巧| www.627590.com-帝王彩平台-| www.763530.com-手机能买足彩吗| www.892982.com-彩票app所有网站| www.09my.com-旺旺彩票二维码扫描| www.16985.com-时时彩私彩如何破解| www.87751.cc-神彩网论坛-| www.599307.com-体彩的收藏价值| www.52737.com-55彩票网站平台| www.hq63.cc-买彩票技巧-| www.585979.com-贵宾网天下彩| www.235709.com-齐鲁风采七乐彩单式| www.i36.me-全民彩票官网登录| www.932352.com-快三网投下载app| www.450052.com-198彩咋样-| www.229760.com-郑州快三奖金规则| www.345374.com-vr彩票是干嘛的| www.461446.com-经纬时时彩平台网址| www.33595.cc-足彩19020期| www.311991.com-体彩七星彩网上购买| www.332400.com-178彩票app-| www.33qz.com-鱼彩票-| www.320349.com-利博彩票app| www.460818.com-可信的彩票网站系统| www.611414.com-网上开彩票投注站| www.728285.com-安卓彩8娱乐| www.861190.com-福彩中奖规则图示| www.961206.com-大奖彩票官网app| www.ao70.com-贵州福彩中心电话| www.193433.com-吉林竞彩快三查询| www.007709.com-全民彩票官方版| 博友彩www.267by.com| www.dg08.com-瑞彩祥云彩票网址| www.uf47.com-快三怎样选才赚钱| www.098892.com-大发快三倍投技巧| www.6415.net-彩票计划提醒软件| www.876645.com-3b彩吧i助手| www.yv39.com-釉中彩餐具安全吗| www.984892.com-体育彩票大乐透选号| www.cw31.com-免费搭建时时彩平台| www.z49.cc-新华论彩是什么意思| www.694118.com-302彩票-| www.797676.com-金彩网246网| www.2982.wang-天津十分彩开奖结果| www.911087.com-山东好彩-| www.mp9.cc-大发快三正规网站| www.019852.com-彩之星安全不| www.120353.com-五和彩下载-| www.228366.com-四川彩礼价目表| www.14mf.com-七星彩冷热怎么查询| www.97578.com-时时彩趋势-| www.111714.com-彩票七天乐-| www.327844.com-爱投彩票官网下载| www.552927.com-老挝时时彩诈骗| www.046206.com-开福利彩票站赚钱吗| www.100788.com-三分时时彩app| www.781797.com-福彩2d玩法票样| www.886338.com-大发彩票网是私彩吗| www.011093.com-福彩手机彩票网| www.151052.com-查彩票的软件有什么| www.358747.com-体彩中6个数字| www.vo0.cc-海南彩票大赛| www.593082.com-彩虹的重力是悲剧吗| www.723320.com-福彩字谜画谜总汇| www.77794.com-福彩双色球怎么玩法| www.21cu.com-入侵彩票黑网站方法| www.94fv.com-那个软件能买足彩| www.2111.tv-福彩3d13-| www.58589.cc-玩彩网真假-| www.837538.com-立彩佳美缝剂多少钱| www.801044.com-彩票今日姓名运势| www.709632.com-福彩短信投注收费吗| www.01131.com-今晚足球足彩直播吧|