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.35500.cc-苹果99彩票下载| www.as72.com-福彩有5d吗-| www.150770.com-有什么软件能买彩票| www.4826.biz-博金彩票app下载| www.348658.com-乐彩网的专家怎么样| www.494268.com-竞彩实单2串一推荐| www.57162.cc-快三拉花宴飞华| www.154029.com-彩票源码稳赚高收益| www.603582.com-山西福彩彩票中大奖| www.543664.com-玩彩小生专栏| www.753207.com-9d彩票网址-| www.75465.com-模拟竞彩投资软件| www.873675.com-彩票平台源码出售| www.979955.com-快三彩票怎么买| www.ik1.cc-12快乐彩-| www.32lq.com-大发快三如何看走势| www.15651.cc-彩铅画画-| www.031680.com-七星彩历史号码查询| www.137749.com-567彩票是真的吗| www.321081.com-南国彩票论坛坛特区| www.m40.org-十选五是正规彩票吗| www.90rb.com-我玩福彩亏了七万| www.639090.com-体育彩票去哪里申请| www.634183.com-博创彩票官方下载| www.723979.com-内蒙古体彩十一五| www.810655.com-中国体育彩票电话| www.887252.com-天天购彩票-| www.px09.com-58彩票官方网址| www.45gn.com-如何开卖彩票的店| www.677.cm-时时彩五星计划网址| www.002230.com-七乐彩投注查询表| www.x32.cc-彩神口诀-| www.hg21.com-下载中彩彩票网| www.898248.com-足球彩票的区别在哪| www.ag64.com-手机彩漂网-| www.842.cc-80彩票是啥意思| www.6696.live-快三复式表-| 发彩www.50732y.com| www.160155.com-利彩管方网站| www.780035.com-排列5彩票中奖规则| www.932988.com-分分快三平台合法吗| www.ev5.cc-时时彩预测器| www.44560.com-淘彩tc8co-| www.85239.com-真龙扫码中奖彩票| www.603892.com-3a彩票网站-| www.700018.com-竞彩足球跟单可靠嘛| www.777571.com-巨人彩票下载| www.859516.com-彩票997官网| www.947224.com-麦久彩票网一| 易彩网www.335021.com| www.mc93.com-福彩快三倍投| www.x19.bid-体彩胆码预测高手| www.76uj.com-彩票图表走势大全| www.88654.cc-人人中彩票手机下载| www.vh03.com-天津福彩中心| www.04mq.com-今天体彩p3中奖号| www.2735.pw-分分快三贴吧| www.861091.com-5分⑥和彩开奖结果| www.73281.cc-河北快三遗漏最大| www.046617.com-江苏快三能挣钱吗| www.219757.com-福建快三开奖时间| www.637111.com-彩虹六号手机妹壁纸| www.5169.vip-七乐彩走势图周五| www.22859.com-福彩快3一定牛| www.164053.cc-百姓彩票网可靠吗| www.1443.cm-109彩票下载| www.8495.vip-色彩的搭配-| www.68598.cc-辽宁好彩快三查询| www.026855.com-辉煌彩票骗-| www.93332.com-机选七星彩票| www.0180.vip-2018彩票改革| www.6740.in-彩票做假为何不查| www.05721.com-乐彩网大发快是骗人| www.990234.cc-湖北省快三预测| www.3162.vip-七星彩大公鸡彩图| www.33295.cc-彩票新规影响| www.236444.com-乐乐彩靠谱吗| www.121894.com-排列3彩票-| www.535239.com-时时彩怎么玩不会输| www.52267.com-今日竞彩专家推荐号| www.022493.com-财神5分彩开奖结果| www.136902.com-吴江彩票店转让| www.56834.com-购乐彩app-| www.5290.net-今晚买什么码七星彩| www.18568.cc-彩神王成周怎么样了| www.94211.com-浅谈福彩文化建设| www.818696.com-体彩3dp3开奖号| www.896350.com-彩票合买网站有| www.959502.com-彩票选号软件下载| 大钱庄彩票www.dqz6.com| www.058212.com-彩票网cpw-| www.322537.com-足彩2串1稳赚方法| www.6340.net-体彩排列五购彩软件| www.035252.com-9998彩票平台| www.451178.com-杏耀彩票app| www.576495.com-爱乐彩票安卓| www.650356.com-中国体育博彩合法吗| www.761944.com-极速时时彩最稳打法| www.887535.cc-2044彩票网址| www.982442.com-鸿彩网盈利模式| www.iy60.com-福利彩票官方网| www.17551.cc-腾讯60秒彩票| www.226845.com-快三有没有技巧| www.010723.com-五星彩票网-| www.069749.com-35彩-| www.089756.com-买中国体育福利彩票| www.181329.cc-3快三走势图青海| www.400571.com-01彩票怎么玩| www.612624.com-约彩票-| www.26kp.com-石家庄竞彩快三查询| www.3060.biz-快乐十分彩票预测网| www.kq82.com-彩票分析师收入| www.qi46.com-福彩好彩1开奖结果| www.018469.com-彩票破解方法| www.125803.com-彩票最新开奖信息| www.er58.com-快三qq群-| www.43776.com-苹果6手机膜彩膜| www.qu94.com-3d购彩平台-| www.930833.com-体彩竞彩兑奖规则| www.575453.com-6288彩票真假| www.670297.com-彩票256有多少种| www.800104.com-中国体彩网开奖| www.905155.com-快乐彩查询夙| www.755973.com-彩彩吧图库第二版| www.nl37.com-竞彩投注比例误差| www.21nu.com-qq里面彩票和买| www.403663.com-福利彩票隔期走| www.533233.com-极速快三中奖规律| www.831156.com-商丘彩票店转让最新| www.590096.com-福彩3d杀码公式| www.657622.com-今天体肓彩票结果| www.360454.com-快三一期计划| www.561790.com-足球彩票任选九开奖| www.656335.com-北京彩票店生意转让| www.715866.com-大发彩票信誉怎么样| www.958453.com-九万彩票下载| 体彩网www.3890q.com| www.445969.com-吉林体育彩票十一| www.059550.com-k彩快三下-| www.31755.cc-快易彩首页-| www.54cr.com-福利彩票的营销计划| www.088922.com-123彩票合法吗| www.584.net-时时彩预测器在线| www.5355.me-玖玖彩票信得过吗| www.tt71.com-足球彩票店app| www.uq39.com-杏彩线路测速| www.hg69.com-时时彩如何让你| www.93711.cc-网易彩票小荷推荐号| www.177712.com-新快三是全国还是| www.298973.com-彩03app-| www.261566.cc-吉林快三官网下载| www.890452.com-全民智投彩票下载| www.809660.com-河南体育彩票网站| www.77840.com-彩票星期五开什么| www.395137.com-彩虹搭建代刷网主站| www.777422.com-澳客彩靠谱吗| www.183883.com-安徽快三走势助手| www.hx20.cc-彩乐汇是诈骗么| www.697750.com-彩票大赢家网| www.819431.com-好彩票官网更新公告| www.920332.com-福彩十二生肖开奖| www.982847.com-共享彩票靠谱吗| www.gt06.com-大发快三是国家彩票| www.i65.shop-彩名堂官网软件下载|