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.588898.com-体彩开奖查询号| www.26lp.com-贵州竞彩快3查询| www.273380.com-福彩初创期-| www.ow8.com-吉林快三合之| www.7dt.com-彩票复式例子| www.776494.com-快乐彩大小必赢买法| www.331911.com-老梁说穷人买彩票| www.907744.com-彩票算号软件| www.989948.com-彩漂剂-| www.dk98.com-篮球彩票玩法| www.yp26.com-广东生肖彩票| www.32tq.com-彩票信用盘开户| www.0762.pro-七星彩解梦码册| www.7679.com-中彩网全偶统计图| www.526081.com-天津时时彩计划个位| www.613862.com-马来西亚福彩字光| www.231084.com-快三三军玩法机率| www.816127.com-彩票双色规则| www.954381.com-牛蛙彩票四不像| www.fk56.com-网赌彩票害死多少人| www.88sk.cc-爱彩人彩票网怎么样| www.3939.bid-口袋网彩票-| www.17524.com-云南保山彩票店加盟| www.502771.com-多彩投股东-| www.069908.com-福彩天地报预测| www.115709.com-中国足球竞彩网下载| www.916826.com-1分快三大小规律| www.280331.com-福彩快三有哪些省有| www.5025.net-旺彩彩票软件破解网| www.953514.com-竞彩奖金怎么计算| www.246471.com-彩票快三单查询结果| www.39mc.com-赢家彩票网-| www.34859.com-福彩三d彩报三版| www.97914.com-运盛彩票网站| www.076448.com-红旗彩票快三技巧| www.253969.com-wcp玩彩票app| www.365345.com-彩库图吧-| www.155017.com-足彩拉力是什么意思| www.558918.com-中国体育彩票地址| www.23db.com-天津体彩中心网站| www.2175.cn-彩票需要身份证| www.207051.com-高频彩票有规律吗| www.15ql.com-彩票站对联-| www.23319.cc-盈彩彩票官方网站| www.827227.com-富豪彩票-| www.921785.com-大发快三时时分分彩| www.999937.cc-大乐透_彩民村| www.mk95.com-北京快三-| www.514505.com-吉林快三2同号规矩| www.kc03.com-秒秒彩追号技巧| www.728456.com-揭秘时时彩骗局| www.838001.com-nba季后赛彩票| www.902959.com-可以彩票合买的网站| www.963502.com-怎么做时时彩平台| 易彩网www.12455d.com| www.h44.xyz-旋子彩画-| www.70hi.com-贵港市福彩中心| www.9731.net-破解五分彩个位规律| www.170006.com-快三出豹子的征兆| www.167521.com-快三群里都是托吗| www.579521.com-江苏快三推荐二同号| www.873.tv-内蒙快三组合走势图| www.930539.com-体彩六加一规则| www.567862.com-越南彩票怎么查| www.38dv.cc-网上买7星彩| www.2668.biz-互联网彩票停售原因| www.17547.com-聚星彩票平台怎么样| www.444277.com-福彩3d14点和值| www.370577.com-二手彩钢瓦价格| www.qj15.com-彩22江苏快3| www.76627.cc-陈赫买彩票中奖| www.095268.com-688345购彩网| www.620035.com-足彩客胜公式| www.179656.com-颖彩今晚双色球预测| www.8485.vip-体育彩票转让北京| www.305617.com-中国的彩票能中奖吗| www.582995.com-竞彩分析预测大师| www.587.cn-足球体彩红单助手| 乐彩网www.lcw199.com| www.637650.com-彩虹六号租号平台| www.792731.com-彩票领奖要多久| www.908826.com-湖南福彩官网新址| www.cf52.com-怎么购买吉林快三盘| www.49365.com-可靠的彩票代购网站| www.036025.com-体育彩票术语大全| www.6lw.com-彩票学原理-| www.034813.com-购买网络彩票合法吗| www.948986.com-国彩网站有哪些| www.757654.com-淘彩app网站下载| www.863936.com-166彩票下载| www.951492.com-推荐几个彩票网站| www.hb9.cc-安徽快三遗漏走势图| www.332611.com-合法的网售彩票平台| www.507901.com-谁有玩时时彩网站| www.911657.com-福利彩票新彩网| www.254856.com-广东好彩3奖金| www.723965.com-湖北快三高频彩| www.5th.cc-玩彩哪个彩种赚钱| www.106360.com-彩77安卓规矩| www.69xs.cc-998彩-| www.1853.top-广西快三提示| www.959692.com-盈彩网址-| www.957447.com-红牛彩票怎么玩| 500彩票www.573678.com| www.oq59.com-陈赫中彩票是第几集| www.33tz.com-环球彩票新用户注册| www.945848.com-足彩半全场玩法介绍| www.186500.com-江苏快3彩票软件| www.970418.com-大发彩票有人控制吗| www.791503.com-京东上能买彩票吗| www.888008.com-百乐彩骗局揭秘| www.956253.com-倍投彩票能稳赢吗| 500彩票www.50024f.com| www.dq87.com-玩大发快三输了报警| www.ud29.com-乐彩网首页免费| www.28.net-七星彩手机直播现场| www.368283.com-浙江体彩超级大乐透| www.302806.com-彩票天下23cc| www.120775.com-老彩票qq群-| www.6928.wang-七彩云南票价| www.275798.com-时时彩做庄输了| www.365807.cc-时时彩单双技术| www.271659.com-好彩1玩法技巧| www.612399.com-马来分分彩计划| www.960513.com-乐亿彩票下载安装| www.ng29.com-吉林快三三同号遗漏| www.62735.com-财经网时时彩走势图| www.46276.com-福利彩票票样| www.145228.com-福彩3d彩报图| www.218720.com-福彩刷流水-| www.274758.com-极速时时彩万能规律| www.339402.com-天天中彩票软件| www.640222.com-新浪彩票爱彩| www.702658.com-深圳快乐彩没人管吗| www.am10.cc-彩票购彩大厅| www.300010.com-贵卅快三和值走势图| www.209070.com-福彩快三怎么举报| www.22792.cc-九州体育博彩官网| www.019119.com-牛彩票网址www| www.88pw.com-竞彩看盘看不懂| www.338293.com-黔西汽车站彩票店| www.1050.vip-彩票导师怎么骗人| www.739003.com-体彩和福彩有假吗| www.810805.com-彩票星期五开什么| www.44854.com-彩票之家与你同行| www.898689.com-甘肃快三两码遗漏| www.962889.com-97彩票网软件| 500彩票www.26299p.com| www.az79.com-内蒙古快三开奖直播| www.og23.com-都皇彩票-| www.b79.club-快三和时时彩区别| www.13mi.com-大星大星彩票走势图| www.76jf.com-42500彩票-| www.0235.vip-时时彩杂六什么意思| www.4793.org-万彩网会不会被骗钱| www.8729.top-乐彩网吧-| www.bd27.com-万博博彩app| www.j40.website中国福利彩快乐十分| www.112161.com-泰安三亿彩票| www.202264.com-贵州省体彩中心| www.761934.com-湖北快三害死我了| www.5533.vip-足彩狗万app| www.29719.cc-快彩是什么网站| www.ku48.com-3地福彩字谜|