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.104698.com-新快三游戏恐龙| www.999941.com-中国福彩双色球时间| www.717566.com-福彩真的假的| www.879740.com-精准团队彩票计划| www.480000.com-中国新彩吧-| www.622775.com-手机网购体彩七星彩| www.760074.com-易彩彩民福地测速| www.916011.com-营口福彩-| www.cai220.cc-快三助手中奖宝典| www.019736.com-中港澳彩票-| www.148765.com-彩票万能倍投器| www.270932.com-彩109app-| www.446469.com-爱迷彩下载-| www.42155.com-金彩元-| www.198543.com-湖北体彩网-| www.6238.cc-快乐十分福利彩票| www.655446.com-上海上海快三| www.936286.com-爱刮刮自助彩票| www.ln9.com-搜索河北省快三| www.024099.com-彩迷生活真实写照| www.126021.com-竟彩开奖查询结果| www.8063.cc-中国三大水彩画家| www.34875.com-新彩吧走势图| www.119158.cc-917彩票-| www.137408.com-故乡的山歌钟彩媚| www.342133.com-彩票256是假的吗| www.453855.com-体彩双色球玩法介绍| www.568497.com-洛阳七彩龙都| www.666666.com-乐彩网提现不了| www.776937.com-快三拉花教学| www.897639.com-彩票小广告贴怎么弄| www.cp639.com-彩神8快3下载| www.42258.com-河南彩经网app| www.94213.cc-pc蛋蛋彩开奖| www.060764.com-私彩合法吗-| www.457.xyz-买彩票利用时间差| www.588097.com-福彩三d大盘走势| www.82da.com-七星彩差分-| www.701765.com-腾讯60秒彩票| www.823289.com-附近的福彩店| www.933527.com-彩票大奖去哪里兑奖| www.992420.com-河南快三买和值| www.dy46.com-58彩票官方网站| www.yq96.cc-延吉市体育彩票| www.wd31.com-酷彩app官网官网| www.932500.com-快三坑人吗-| www.996982.com-乐盈彩票官网| www.ao22.com-江苏利彩快三查询| www.sh11.com-北京时时彩投注网站| www.34mq.com-体彩昨晚开奖号码| www.009064.com-瑞彩祥云注册邀请码| www.805966.com-竞彩篮球856| www.462734.com-cb8c0m彩宝票| www.551206.com-时时彩技巧论坛| www.618437.com-约彩彩票实名安全吗| www.65ol.com-北京三分彩开奖| www.6857.top-体彩飞鱼任选三技巧| www.202428.com-体彩贵州11选5| www.817862.com-足彩19026-| www.946132.com-彩九c9com平台| 全民汇彩票www.52303x.com| www.881708.com-500彩票包赔任务| www.974605.com-七呈彩开奖-| www.63bp.com-体育彩票大乐透奖励| www.089035.com-休彩票-| www.227271.com-重庆快三群骗局揭秘| www.11338.com-彩乐乐打不开网| www.58122.cc-腾讯彩票玩法| www.027633.com-体彩31选7-| www.149852.com-江西省体彩中心新址| www.948664.com-福利彩票销售额| 幸运彩票网www.33598z.com| www.101240.com-彩票足球软件| www.233080.com-台湾5分彩开奖结果| www.539402.com-如何提高彩票销量| www.011008.com-昨日体彩开奖| www.235470.com-福彩3d群-| www.318861.com-上海快三爱乐彩下载| www.4328.biz-章鱼彩票是否合法| www.16hz.com-国家足彩培训师| www.903728.com-9万彩票下载地址| www.137591.com-说彩票-| www.719206.com-描写彩虹的一段话| www.999169.com-彩彩票乐娱平台| www.5hk.com-高频彩有规律吗| www.1297.vip-哪个彩票app靠谱| www.15773.cc-零基础学彩铅入门| www.567411.com-快乐生肖时时彩| www.59818.com-微彩彩票ios| www.925770.com-香港资料大彩富网| www.292200.com-福彩3d原创图谜| www.377806.com-彩礼给女方没结婚| www.552696.com-甘肃快三开奖助手| www.298665.com-31体彩开奖结果| www.484540.com-北控京彩彩票新零售| www.s54.com-下载彩票助手| www.218342.com-大奖快三官网| www.447326.com-手机版平安赛车彩票| www.17651.cc-彩票利润-| www.79171.com-福彩3d纶坛-| www.256168.com-手机购彩下载| www.474891.com-246天下彩客| www.509282.com-万城彩票真假| www.595360.com-双彩网是做什么的| www.894622.com-彩票字图片-| www.984878.com-神彩争霸官网| www.le11.cc-天天中奖彩票软件| www.225878.com-彩迷网腾讯分分彩| www.306652.com-彩票机选中奖率高吗| www.401372.com-周二竞彩足球赛果| www.986571.com-竞彩篮球比分| www.01929.com-旺彩网天下神胆| www.868692.com-三宝乐购是什么彩票| www.990879.com-彩吧网站-| www.er59.com-快三技巧论坛| www.50ba.com-买竞彩有人能赚钱吗| www.2167.vip-体彩8码遗漏| www.9508.top-百博七星彩投资网| www.024910.cc-七星彩奖表长条| www.10769.com-赢钱彩app靠谱吗| www.77576.com-彩票保安区在哪里| www.028257.com-手机彩票投注站下载| www.880503.com-北欧十分彩开奖| www.959573.com-火炬彩票提现不了| www.417.live-pc快三规律-| www.27nd.com-分分彩赢了一年| www.979.cm-分分彩是怎么坑钱的| www.5801.vip-乐彩网老图标| www.gs00.com-大发快三彩票合法吗| www.93986.cc-足彩欧赔及凯利指数| www.129706.com-南国彩票七彩论坛| www.662620.com-逆袭时时彩智能做号| www.893756.com-大财神彩票-| www.959002.com-体彩臧机图-| 双彩网www.152012.com| www.949415.com-1.5分彩技巧| 惠民彩票www.hm3222.com| www.zw1.cc-彩芽-| www.209099.com-81彩票-| www.yd03.com-福建体彩11选五| www.672195.com-特彩吧app90期| www.617387.com-现有彩站出兑| www.734178.com-彩票新版走势图下载| www.595614.com-尼彩手机怎么样| www.687378.com-139彩票安卓版| www.778197.com-国彩网可以挣钱吗| www.888228.com-乐彩合买是骗局| www.315.vip-免费领彩金足球彩票| www.397168.com-我搜一下福利彩票| 大赢家彩票网www.83033o.com| www.908012.com-网购彩票app下载| www.983234.com-彩38彩票注册| www.36ul.com-703彩票网官网| www.0970.loan-足彩数据爱彩网| www.8473.cm-天空彩免费资科大全| www.37939.com-辽宁福彩怎么样| www.89240.com-567彩票会黑钱吗| www.021604.com-幸运分分彩平台| www.085570.com-大发彩票一手代理| www.270459.com-新彩票娱乐平台| www.093585.com-乐选3中奖规则体彩| www.241066.com-快赢彩票手机客户端| www.9242.vip-大乐彩怎么回事| www.44091.com-4567彩票app|