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天

知道了
彩票123现在叫什么名字 www.207037.com-至尊彩app-| www.16906.cc-360彩票不能买了| www.7997.xyz-彩宝贝杀号定胆网| www.225882.com-彩神uv平板打印机| www.348352.com-手机买彩票那个好| www.tk59.com-酷彩网登录-| www.701595.com-淘彩app下载官方| www.813255.com-重庆彩票投注站电话| www.902328.com-经营黑彩多少判刑| www.973817.com-幸运五星彩开奖下载| www.gs0.com-北京快三走势图牛| www.751445.com-中国福利福彩app| www.861234.com-体彩直播现场直播| www.956975.com-hk百彩-| 彩69www.091181.com| www.362717.com-彩票缺了一个小角| www.561321.com-体彩复式投注计算器| www.195583.com-百宝彩票快3| www.379851.com-湖北快三倍投技巧| www.726871.com-数字彩彩票软件| www.826563.com-买彩票的都是穷人| www.916970.com-河南固始彩票大奖| www.995425.com-易彩堂怎样赎钱| www.34yk.com-彩开票开奖-| www.7004.vip-七彩评价app| www.2358.online七彩神仙鱼繁殖| www.934995.com-体彩电视-| www.kt2.cc-时时彩长龙害死人| www.xw49.com-谁有网上购彩app| www.sj33.com-福彩三分彩是真的吗| www.365597.cc-彩铅画技法-| www.550867.com-彩票的缺点-| www.678008.cc-3d走势图南方双彩| www.761062.com-秒速时时彩计划心得| www.869273.com-七星彩为什么没人买| www.961759.com-福彩三d缩水软件| www.cp1699.com-幸运快三人工计划| www.707700.com-竞彩篮球误差值| www.060194.com-彩世界app下载| www.243563.com-体彩双色走势| www.219228.com-彩票之家app| www.292776.com-广西彩票门户网站| www.vj42.com-红牛彩票快3真假| www.951682.com-红彩会9号-| www.118855.com-彩票店是怎么赚钱的| www.42nh.com-竞彩2串1哪个靠谱| www.70rj.com-六今彩幵码结果| www.6804.cm-福彩数学3-| www.16477.cc-竞彩跟单能赚钱吗| www.935969.com-福彩电话客服电话| www.gk61.com-彩票走势图2元网| www.79sf.com-福彩三个号-| www.u63.club-新彩吧3d总洰| www.654448.com-聚宝盆时时彩安卓版| www.072568.com-九号彩票秒速快三| www.e22.cc-凤凰网彩票开奖查询| www.67gs.com-分分彩龙虎技巧稳赢| www.595659.com-k彩福线路测速中心| www.696996.com-彩神五码计划| www.5082.cc-世界杯足彩结果| www.659523.com-全民足彩彩票官方网| www.755095.com-七星彩3个头3个尾| www.2291.com-网易彩票开奖走势图| www.907977.com-河北福彩3d字谜| www.850325.com-大奖分分彩在哪开奖| www.52659.cc-好彩门户正版资料| www.802591.com-中彩彩票怎么销户| www.67pg.com-中国彩票销售额| www.951895.com-足彩中奖5800万| www.950927.com-中彩网开挂-| www.xk73.com-鑫彩国际彩票| www.004301.com-今天福彩3d中奖号| www.124833.com-迷彩免手机影视网| www.666029.com-新加坡三福彩| www.974075.com-好的彩票平台| www.87849.com-彩票顺龙第几期跟| www.132242.com-中彩票软件官网下载| www.365294.cc-北京体彩中投注站| www.760485.com-香港五分彩是正规彩| www.8ec.com-彩票站盈利点| www.89ql.com-浙江快乐彩票12先| www.e79.club-中国福彩网开奖信息| www.077033.com-app彩票合法吗| www.576251.com-开心100彩票网| www.701560.com-中国足彩比赛分析| www.933299.com-全民中彩票下载安装| www.872479.com-vr3分彩官网| www.030966.com-銘發彩票骗局| www.655040.com-福利彩票快乐十分| www.wo42.com-快3骰子彩票在哪| www.428494.com-苏州体彩巨奖| 杏彩www.00840x.com| www.oa97.com-福彩江苏基本| www.44vh.com-uc彩票正规吗| www.0267.cm-567彩票app下| www.812210.com-福彩中奖窍门| www.04ql.com-七乐彩出球顺序号码| www.ob.com-彩票查询11选五5| www.yu22.com-釉上彩-| www.378303.com-七彩彩票吧-| www.199377.com-福彩快三遗漏号码| www.678125.com-易彩堂怎么注册| www.267293.com-湖北快三遗漏号统计| www.2188.live-福彩3d断组牛彩网| www.05960.com-推店彩票下载| www.573234.com-彩票那个平台有签到| www.799970.com-体育彩票领奖流程| www.876848.com-五星彩开奖-| www.970268.com-彩票带单什么意思| www.kn.com-时时彩选号助手| www.951159.com-中彩网三d综合版| 日彩网www.rcw8899.com| www.253090.com-时时彩宝典ios| www.466011.com-体彩六码组六遗漏| www.554257.com-彩票语录图-| www.630805.com-彩票密籍-| www.612255.com-可以买足彩软件| www.888387.com-彩95app-| www.983161.com-8k彩票是赌博吗| www.ef36.com-百福彩app-| www.s28.club-精彩十分5d直选| www.256514.com-安微快三一定牛预测| www.72qw.com-福彩天下网址是多少| www.52941.com-快三杀大赔小| www.64za.com-夺金三分彩-| www.71570.com-快钱彩票怎么玩法| www.046408.com-天天中彩票软件| www.0681.net-开福彩-| www.117159.com-官方体育彩票专业版| www.569396.com-彩票免费赠送彩金| www.2gb.com-福利体育彩票| www.316150.com-余姚体彩去哪申办| www.410666.com-希望彩票-| www.006465.com-好彩1871铁盒| www.889163.com-彩票2元官网| www.064255.com-私彩平台大数据| www.303181.com-优乐彩官网登录| www.750802.com-爱彩票苹果版| www.ss.com-福彩快3奖励规则| www.7865.cm-足彩彩票贴吧| www.23231.cc-新彩网3b字谜区| www.092170.com-中国竞彩网论坛| www.383454.com-5d体彩开奖结果| www.160335.com-体彩高频彩-| www.288966.com-乐彩网首页免费| www.982510.com-优游时时彩平台注册| www.290086.com-香港彩库宝典| www.381366.com-七乐彩我要机选| www.081903.com-福彩总局-| www.097346.com-体育彩票竞彩足球| www.87hk.com-七乐彩奖池走势图| www.385616.com-怎样选7星彩票号| www.422673.com-彩票360网购大厅| www.29383.cc-1516.彩票-| www.67ax.com-幸运快三彩票计划| www.246899.com-彩票中奖秘诀| www.317269.com-彩九平台明儿| www.391819.com-山东体彩扑克| www.503888.cc-彩票平台首充福利| www.562615.com-什么是重庆快三| www.626906.com-青蛙彩票手机开奖| www.700053.com-168彩栗-| www.760176.com-卖福彩有任务吗| www.810191.com-中国体彩中心在哪里|