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.185656.com-福利彩票理念| www.a97.com-游戏《彩虹伞》教案| www.tz64.com-福彩快三顺子多少钱| www.520.pink-赢彩彩票官网下载| www.2236.cn-彩票中心通知| www.106334.com-彩票77安卓版下载| www.064533.com-什么是乐迎彩票| www.xu83.com-买彩票不给钱案例| www.237805.com-双色球彩票选号软件| www.826018.com-彩宝贝3d杀号| www.129495.com-易众彩店稳不稳| www.516986.com-中国传统色彩卡片| www.740040.com-福彩主任是多大的官| www.50qd.com-彩经网快三-| www.208502.com-彩票长龙提醒软件| www.055174.com-长春打击黑彩| www.106411.com-彩票黑客团队| www.588157.com-搜索休彩排挒3| www.751764.com-彩票今天中彩| www.847589.com-福彩蛋-| www.958504.com-七星彩开奖图册| 126彩票网www.821260.com| www.229226.com-3d彩票走势图表| www.655246.com-2019彩票新政策| www.772865.com-怎么样网投彩票| www.875218.com-皇冠彩票被黑了| www.994071.com-体彩蓝球有几种玩法| www.gv95.com-盈彩网揭秘在线| www.122818.com-网易专家预测足彩| www.288986.com-彩神苹果版下载网址| www.082663.com-彩29app-| www.29631.com-西安市福利彩票| www.860955.com-河内五分彩官方开奖| www.973496.com-温州体彩中心电话| www.lk08.com-中福快三在线计划| www.1473.vip-写风景的彩铅画| www.233640.com-老谢说彩2018年| www.679301.com-老公总是玩彩票| www.71641.com-就业时报3地天天彩| www.060290.com-网昜彩票开奖直播| www.155214.com-最新足彩对阵表| www.703456.com-快三推广话术| www.522332.cc-分分彩助手软件| www.601439.com-盈丰彩票互动大厅| www.679624.com-至尊彩平台骗局| www.761635.com-可压球的竞彩app| www.845315.com-海南发展彩票| www.118555.com-体彩排列5中奖结果| www.211120.com-彩报3d怪字图| www.280013.com-彩乐乐网安全吗| www.770738.com-七彩建盏养后效果图| www.516359.com-彩票被风控了| www.250061.com-云彩在线彩票骗局| www.458198.com-今日福彩三的字谜| www.573119.com-天猫彩票注册网站| www.888487.com-彩票137-| www.rm94.com-基诺彩的诀窍| www.35344.com-福利彩票交流群| www.766885.com-手机重庆时时彩官网| www.791378.com-彩票查询31选7| www.929247.com-福彩网可靠吗| www.gf4.com-生肖彩票怎么买| www.706048.com-微信群发送彩金| www.820265.com-七星彩小精英彩图版| www.62cu.com-福彩3d玩法有哪些| www.324001.com-航天彩虹股票行情| www.391713.com-彩票正规app| www.489413.com-三星彩票娱乐漏洞| www.si11.com-时时彩预测下期| www.0143.cc-彩色的造句子一年级| www.067022.com-黑彩十大平台| www.zz0.com-河南福彩快三走试图| www.757661.com-淘彩网是不是正规的| www.199618.com-河北省福彩快三| www.618901.com-明天开彩票吗| www.752559.com-立彩助手追号计划表| www.828444.com-微信上能买彩票吗| www.2666.date-6288彩票靠谱吗| 彩民村www.88cmc.com| www.701099.com-足彩通app苹果版| www.9627.biz-手机彩票外挂| www.6304.cc-彩票c515-| www.8752.cn-彩票东方六加一开奖| www.976741.com-全国不要彩礼| www.so18.com-这期五星彩开奖号码| www.91wz.cc-玩彩赢钱心态是| www.392533.com-搜抓彩票-| www.739490.com-盈彩网是骗人的吗| www.831505.com-年会彩票中奖| www.970504.com-腾讯分分彩下载| www.ek86.com-众彩网专家预测| www.2oy.com-彩客彩票滚球| www.742.net-今天五星彩开奖| www.jx49.com-昨天快三开奖号| www.899900.com-彩票计算软件安卓版| www.df97.com-玩吧快三-| 大奖彩票www.djcp234.com| www.929001.com-中彩网广西福利彩票| www.986447.com-基诺彩票游戏| www.ah74.com-特区彩票论坛精选| www.qw24.com-福彩北京快3| www.8wi.com-江苏快彩下载| www.694864.com-竞彩今日推荐| www.056719.com-七星彩中五号多少钱| www.622772.com-福彩3d杀号软件| www.3531.pw-彩票平台代理贴吧| www.8226.cm-合一彩票登陆| www.22912.cc-3d博彩吧-| www.389787.com-东莞大朗彩票站转让| www.5809.cn-竞彩比分过关3中2| www.yn00.com-体彩11选5专业版| www.639091.com-开体彩店咨询电话| www.731056.com-8k易彩登录大厅| www.815193.com-发财网彩票下载| www.884142.com-盛彩下载-| www.49wq.com-竞彩虚拟足球| www.393599.com-彩九最新版本| www.504578.com-节目彩排的意义| www.yl49.cc-彩经彩票-| www.642450.com-福彩3d坐标-| www.181905.com-华夏彩票-| www.329516.com-乐喜彩票拉人| www.85593.cc-购彩引导-| www.202710.com-湖北福彩网精彩十分| www.293563.com-河南省体彩网| www.234568.com-2019年彩票改革| www.434009.com-港彩app下载地址| www.55990.cc-七星彩开奖今天查询| www.5078.top-福彩25选7奖结果| www.14995.com-全民彩票提现不到账| www.008589.com-足彩19051开奖| www.236096.com-足彩对阵表-| www.7341.org-七天彩平果版| www.320117.com-百宝彩app账号| www.pl52.com-彩色透水混凝土施工| www.390314.com-新疆11选5彩票| www.479718.com-七星彩几分-| www.598250.com-福彩投注站挣钱吗| www.859215.com-彩票砍龙概率| www.953249.com-彩8彩票客服| www.1054.live-彩票卖一张赚多少钱| www.303854.com-鑫彩彩票正规吗| www.378052.com-七彩阳光音乐带口令| www.522219.com-八亿彩票app| www.582482.com-彩票大使321期| www.638070.com-色彩搭配师-| www.387.space-下载安徽体彩| 中彩www.zcwf5.com| www.103493.com-竞彩足球胜平负玩法| www.218337.cc-哪里卖吉林快三图| www.778082.com-zgg官方彩网站| www.964618.com-足彩14场最新预测| www.ao63.com-安徽快三开奖和值图| www.y33.top-体育彩票足球比赛| www.816112.com-湖北快三娱乐| www.0yl.cc-彩虹拼音怎么写| www.sk26.com-彩乐乐网怎么样| www.186616.com-快三秒热水器安全吗| www.71pm.com-关于买彩票的诗句| www.27ye.com-在线艾彩原创视频| www.xg32.com-宁夏快三50期| www.632331.com-天下彩票幽默玄机| www.703563.com-甘肃福彩天地报纸图| www.765832.com-河南省快三开奖规则|