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天

知道了
1分快三 www.965549.com-北京福彩快三中奖号| www.ey40.com-时时彩助手软件下载| www.r53.cn-乐猫彩票安卓版下载| www.65qy.com-众彩网黑蝴蝶预测| www.1794.org-肥城体彩3亿| www.19055.cc-快三彩8网站| www.69284.com-足彩14奖金-| www.079615.com-飞鱼体彩-| www.160014.com-彩神争8ll网址| www.271622.com-福彩好彩1开奖结果| www.367805.com-七星彩番外小馒头| www.486182.com-重庆福彩幸运走势图| www.575168.com-足球欧洲体育彩票| www.659072.com-云南时时彩几点开始| www.791131.com-彩票模拟选号| www.875002.com-江苏快三是国家彩票| www.964681.com-今日nba竞彩推荐| 乐点彩票www.318187.com| www.kj13.cc-瑞彩祥云官网app| www.p00.org-玩彩网官网-| www.56we.com-腾讯彩票江苏快三| www.0866.com-优彩股份-| www.01814.com-彩票返点怎么调| www.61711.com-大胜彩票炸金花软件| www.026893.com-7773d福彩-| www.111562.com-大发时时彩计划数据| www.189281.com-时时彩胆拖组六胆拖| www.276923.com-深圳快乐彩开奖结果| www.408955.com-七星彩能网上买吗| www.526316.com-江西时时彩专业版| www.634538.com-福彩双色球专家推存| www.733011.com-金坛体育彩票中心| www.814945.com-球彩体育-| www.892062.com-快彩分析软件| www.966443.com-燕赵福彩网快三| 500彩票www.359500.com| www.jq06.com-宁夏快三下载安装| www.j34.net-青海福利彩票开奖| www.48vi.com-彩虹世界老版下载| www.0444.vip-彩票群规怎么写| www.9831.shop-166彩票吧-| www.56638.com-国民彩票登录| www.020262.com-网易红彩靠谱吗| www.098842.com-福彩包括哪些| www.171746.com-河南快三连线走势图| www.345946.com-爱购彩旧版-| www.439918.com-c58彩票三分彩| www.536614.com-福彩宣传标语| www.653209.com-顶级会员彩票登陆| www.732786.com-体彩19052-| www.793610.com-贵州快三最新预测| www.875018.com-太原体彩店-| www.977247.com-国家规定限制彩礼| www.jf17.com-快三推广的话| www.e17.cc-湖北福彩网东湖论坛| www.40pj.cc-所有彩票开奖网址| www.1139.cn-福彩助学项目概况| www.8010.in-海南彩票开奖时间| www.30207.com-3d开奖南方双彩网| www.76856.com-新浪竞彩2串1推荐| www.028409.com-博瑞彩票是真是假| www.109041.com-竞彩奖金优化软件| www.180723.com-中福快三免费计划| www.257511.com-中福彩官网app| www.334258.com-广西福利彩开奖结果| www.419448.com-m彩色香烟图片| www.522242.com-七乐彩的开奖日期| www.593986.com-万豪福彩西西园| www.669591.com-实名制购彩-| www.750675.com-兴彩票网站-| www.821474.com-体彩今日舟东全图| www.895311.com-官方彩票漏洞| www.964435.com-足彩最新比分直播| 网易彩票www.560692.com| www.ip98.com-体彩屋-| www.b68.space-江西体彩江西福彩网| www.32ng.com-神圣时彩计划官网| www.0991.pro-帮朋友买彩票| www.6662.in-外围彩票危险吗| www.11029.com-蓝球竞彩500| www.84709.com-时时彩单期计划网站| www.029212.com-福彩3d胆码家彩网| www.096898.com-体彩的历史开奖结果| www.151988.com-全民彩票电脑版下载| www.318247.com-十字彩-| www.385802.com-负盈利彩票平台| www.553342.com-体育彩票宣传标语| www.622073.com-贵烟多彩多少钱一盒| www.691609.com-烟台福彩吴永模现状| www.770997.com-分分彩计划工具| www.938741.com-多彩网彩票-| www.989704.com-大同彩票平台怎样| www.cp6770.com-下载快三技巧| www.ml13.com-免费领彩金-| www.w58.net-好彩频道主持人小宇| www.51gn.com-足彩11转9怎么买| www.731.cc-时彩网下载-| www.4378.biz-金彩网免费资料| www.9528.bid-4个数字彩票| www.74698.com-手机玩时时彩害死人| www.023543.com-福彩图迷和字谜今天| www.092071.com-附近哪里有体彩店| www.153368.com-体彩是几位数选6| www.325538.com-彩票解太湖-| www.390048.com-新加坡福合彩官网| www.520721.com-时时彩杀号方法如下| www.586480.com-网站开户送彩金| www.655415.com-福彩三d和值遗漏表| www.761646.com-玩快三输死了怎么办| www.835567.com-500百彩票-| www.889256.com-小乐彩下载-| www.974526.com-彩运来官网平台| www.am34.com-全国彩票开奖结| www.qw37.com-黑时时彩-| www.77.vip-滴滴彩怎么玩| www.62is.com-福彩3b天中图库| www.0068.site-美国有哪些热门彩票| www.7582.wang-福彩可以网上购买吗| www.22589.cc-人人中彩网-| www.61106.com-特区七星彩沦坛头尾| www.029703.com-彩票开奖源什么意思| www.101530.com-19031体彩开奖| www.162366.com-i4场足彩-| www.262228.com-福彩3d彩票助手| www.340917.com-彩票站电视怎么调台| www.408027.com-七星彩能不能玩| www.506908.com-鳄鱼彩票下载| www.569927.com-澳门博彩短信广告词| www.635885.com-快三中两个有奖吗| www.761644.com-韩国彩票玩法规则| www.839036.com-山东福彩中心二维码| www.899464.com-彩神通代理会员| www.958946.com-哪个软件还能买彩票| 中国福利彩票www.6364s.com| www.cb24.com-快三什么平台好| www.ri98.com-分分快三是假的吗| www.10pn.com-用彩铅画动漫人物| www.71iq.com-体彩排列3图迷| www.0445.vip-网投彩票下载| www.7653.biz-福利彩票样式图片| www.21756.cc-彩票台子大全| www.58355.com-历史上福彩开奖号码| www.024284.com-福彩19年073期| www.086873.com-有个叫什么福的彩票| www.203759.com-快三彩票是骗人的吗| www.269666.com-盗窃彩票的案例| www.378342.com-彩虹6号买了后悔| www.487738.com-老徐说彩推荐| www.555775.cc-爱彩乐内蒙古快三| www.629943.com-2串1竞彩足彩推荐| www.689807.com-盛大彩票有邀请码| www.759068.com-微彩托的套路| www.869778.com-3d彩票老店主| www.951640.com-彩票平台出租可靠么| www.986734.com-即时竞彩篮球比分| www.gt8.com-安徽快三官网查询| www.pw06.com-长城彩票购彩大厅| www.4gh.cc-彩票投注手兼职| www.50jl.com-14场足彩胜平负| www.382.org-牛彩彩票有风险吗| www.3053.org-彩赢彩票-| www.7680.vip-彩票正码是什么意思| www.17790.com-竞彩足球连续跟单输| www.54022.com-岳阳时时彩-|