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.771266.com-香港八卦幺机彩| www.919079.com-彩吧天气网首页| www.995775.com-足彩盈亏指数应用| www.ez28.com-博牛彩票app| www.230939.com-福彩3d赵公明| www.69073.com-吉祥彩票网是怎么玩| www.9013.loan-乐彩软件下载| www.72558.com-吉林省打击黑彩培训| www.22141.cc-网络彩票无法提现| www.217096.com-彩神uv打印机官网| www.327979.com-南方双彩网预测| www.691571.com-彩乐乐的网址| www.802818.com-彩8官方网站下载| www.932139.com-七星彩中三个有钱吗| 辉煌彩票www.2875o.com| www.669632.com-海南七星彩网投| www.831107.com-广州彩盒包装印刷厂| www.962413.com-福彩3d和数值表| www.fg97.com-盈彩网app-| www.649368.com-正好彩票网黑龙江| www.756352.com-4567彩票真的吗| www.833809.com-新浪开奖直播彩票| www.899273.com-3d彩票软件手机版| www.969710.com-江苏体彩网彩票| 多乐彩票www.817474.com| www.ka10.com-彩票程序破解软件| www.zv44.com-彩96官网-| www.29ae.com-国富彩票是什么意思| www.08rx.com-七星彩2元机选中奖| www.5625.com-双色球杀号百度彩票| www.28063.com-1688购彩平台| www.036005.com-福彩双色球广告语| www.yi24.com-百宝彩大乐透走势图| www.38jx.com-马家窑彩陶王| www.576906.com-人人彩骗局-| www.685458.com-3d彩票第三版| www.781277.com-河南福彩幸运| www.866415.com-搜狐网彩票版| www.941144.com-重庆时时彩必输原理| 中彩网www.2408a.cc| www.fy15.com-福彩出什么福彩多人| www.664280.com-优彩网官网登录苹果| www.770976.com-时时彩4码技巧| www.870287.com-福彩3d计算器| www.945622.com-拉人玩彩票犯法吗| 天天彩票www.1035f.com| www.231675.com-江苏快三三军技巧| www.316900.com-福彩3d坐标图| www.cai7155.com吉林快三大小走势图| www.2562.in-22彩票去哪里下载| www.00909.com-赠送彩金棋牌| www.50802.com-哪个彩票反水最高| www.53te.com-30选7七乐彩玩法| www.2728.cm-快三早知道贴吧| www.804194.com-彩宏娱乐app| www.255122.com-网上时时彩提现骗局| www.147237.com-河北省体彩中心地址| www.335414.com-广西快三外围网站| www.183697.com-河南快三专家推荐号| www.381789.com-我精彩的鲨鱼视频| www.501779.com-现在还有基诺彩票吗| www.656869.com-大家乐彩票机说明书| www.17419.com-淘宝彩票电脑版入口| www.991229.com-福彩3d大赢家| www.40qd.com-福彩放假时间表| www.755356.com-彩票网购还恢复吗| www.860373.com-体彩天下合法吗| www.4212.biz-七彩汇娱乐苹果| www.573660.com-彩票怎样判断冷热号| www.649557.com-缅甸博彩工作| www.721929.com-英国教授研究彩票| www.132085.com-濮阳彩礼多少钱| www.280283.com-老彩票app-| www.41413.com-彩虹六号腾讯官网| www.764163.com-福彩幸运六点半| www.869683.com-幸运彩票多少人输过| www.ag.com-安福彩快三走势图| www.yd32.cc-贵阳福彩申请流程| www.182388.com-彩票选号-| www.205343.com-内蒙古福利彩票结果| www.002273.com-七乐彩单式30选7| www.029646.com-七星彩中4个号有奖| www.062902.com-天吉电子彩报3d版| www.156236.com-彩票号码查询中奖| www.245444.com-易彩申请账号| www.366833.com-福彩即开型彩票兑奖| www.034530.com-时时彩对赌平台| www.362237.com-彩虹的拼音-| www.461346.com-九九玩官方彩票| www.568163.com-天天中彩票提现问题| www.646268.com-足彩投注技巧汇总| www.58712.cc-彩票3d彩报-| www.024528.com-体彩快3规则| www.113430.com-在手机上如何买彩票| www.43288.cc-炫乐彩票注册登录| www.607613.com-彩票双色球卖到几点| www.688308.com-玩分分彩必输| www.776001.com-时时彩被骗了21万| www.854496.com-神马搜索青蛙彩票| www.919016.com-手机博彩软件免费| www.2267.cm-彩票快开游戏如何改| www.353119.com-热购彩网址-| www.517176.com-中彩网社区论坛| www.xt21.com-时彩平台出租| www.8391.wang-彩掌柜彩票真实吗| www.932879.com-体育彩票第一期时间| 五星彩票www.5xcj.com| www.365740.com-中国足球500竞彩| www.033.cc-唐龙快递彩图| www.3067.org-广西双彩今天开奖号| www.9667.loan-赢彩票下载-| www.397443.com-快乐三分彩开奖记录| www.339427.com-深圳体彩店审批| www.529325.com-附近有彩票店没有| www.682538.com-胜率高的足彩公众号| www.119146.com-春秋彩票注册登录| www.71399.com-新浪胜负彩必发市场| www.137097.com-七彩集团-| www.292621.com-福彩青海快三走势图| www.70tv.com-彩易达集团-| www.329172.com-118彩票下载安装| www.122660.com-澳门彩金成功退货| www.7000.cm-快三末班车几点| www.043899.com-福彩扫一扫最新| www.140203.com-99cc赢彩彩票| www.21mt.com-安徽体彩徐启旺| www.319517.com-星彩娱乐-| www.9111.website河南省体彩网点查询| www.cp73.com-安微快三跨度走势图| www.752345.com-福彩3d杀组合绝招| www.145488.com-彩票送彩金app| www.10hd.com-时时彩源码880| www.961007.com-福彩三d双期走势图| www.692571.com-泰国彩票规则| www.356884.cc-过生日送彩票| www.040933.com-彩票挂机方案| www.542030.com-体彩大乐透试机| www.799301.com-下载恒大彩票| www.913796.com-万彩网是合法的吗| 8816彩票www.8816o.com| www.704161.com-988彩票app-| www.803113.com-官网购彩票app| www.873933.com-网易彩票可以提现吗| www.949351.com-福利彩票中奖新闻| 福利彩票www.99677s.com| www.115054.com-齐鲁风釆七乐彩查询| www.049907.com-炫乐彩票二维码扫描| www.115520.com-竞彩足球看必发| www.259.red-意彩平台怎么样| www.9ac.cc-中国体育彩票资助| www.917006.com-彩虹岛水果攻略| www.987888.com-彩83彩票手机版| www.gh89.com-重庆快三群骗局揭秘| www.vk68.com-彩运福彩快3| www.038930.com-高频彩票投注方式| www.uu3.com-国乐彩合法吗| www.030291.com-90彩票_主页| www.635791.com-a7彩票娱乐平台| www.898756.com-678彩票客户端| www.se1.cc-网上快三是骗局揭秘| www.868173.com-七星彩这期规律图| www.152667.com-4s彩票资料站| www.366356.com-国产彩电哪个牌子好| www.524747.com-凯利公式用于彩票|