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天

知道了
亚洲28 www.372917.com-幸运五分彩官方网站| www.78773.cc-亮彩家具-| www.903848.com-彩票竞猜没金豆| www.540944.com-彩票属于金融吗| www.057014.com-网易彩票平台代理| www.440887.com-彩色混凝土磨石地坪| www.7888.cc-今天的体彩开奖公告| www.19bs.com-7天彩票官方彩票网| www.16qm.com-最近彩票开奖一千万| www.244727.com-彩票助手工具软件| www.365919.com-体彩排列三两码遗漏| www.467521.com-百胜彩票注册| www.966920.com-玩黑彩有没有赢钱的| www.gx06.com-江苏福利彩票| www.838419.com-福彩快三开到几点| www.955686.com-福彩中福在线有诀窍| www.2238.org-两块钱买彩票段子| www.69548.com-彩98下载安装| www.598906.com-天天爱彩票怎么提现| www.736464.com-上海福彩官方网站| www.862456.com-公益福彩今日盈亏| www.959164.com-快三坑人-| www.yz4.cc-皇都彩票注册登录| www.09271.com-发彩票短信-| www.958612.com-今晚福彩开奖视频| www.761267.com-体彩在哪里兑奖| www.911505.com-网易福彩开奖| www.986359.com-体彩金手指报纸| www.eg78.com-吉林快三和值图| www.ys51.com-延吉福利彩票站| www.58113.com-网上体彩投注app| www.657147.com-彩奕颂女装网店| www.sh07.com-彩乐乐网站可靠吗| www.96fe.com-彩票平台代打可靠| www.6992.biz-彩票双色球购买规则| www.730682.com-新浪彩票网预测| www.991667.com-安徽福彩快3官网| www.eb62.com-百姓彩票网介绍| www.2731.net-彩霸王综合资料来料| www.6998.hk-七彩麻将-| www.0755.press-香港五分彩有托吗| www.082589.com-国民彩票234下载| www.935976.com-重庆时时彩漏洞骗局| www.bs59.com-快彩网app-| www.672684.com-今日3d福彩开机号| www.59778.cc-彩虹歌词秦时明月| www.870550.com-盛大彩票能信吗| www.956720.com-足彩欧赔初盘如何看| www.jl0.com-玩时时彩怎么稳赚| www.083776.com-彩票网站代理佣金| www.gw99.com-信彩app-| www.i11.website七星彩走试图带连线| www.351448.com-买体彩输惨了| www.830259.com-pk567彩票-| www.895131.com-爱投彩票怎么兑奖| www.949390.com-南方彩-| 600彩票www.336766.com| www.4532.vip-体彩怎么查-| www.58214.com-时时彩骗局揭秘| www.167772.com-上海快三走势图今天| www.cp1148.com-快三平台哪个返点高| 冠赢彩票www.606187.com| www.556076.com-体彩刮刮乐免费试刮| www.135395.com-彩票平台推广| www.126624.com-微信可以买彩票么| www.211574.com-北京快三开奖时间表| www.333074.com-如何看懂各种彩票| www.456405.com-彩易达光电-| www.547898.com-六开彩网址-| www.716139.com-宝马彩票真的吗| www.33620.com-线上购彩-| www.98003.cc-18彩手机版下载| www.238057.com-天天彩选四开奖公告| www.5393.biz-彩钢瓦安装方法图解| www.150172.com-万豪彩票牛牛总是输| www.310931.com-福利彩票19025| www.301904.com-旺彩双色球app| www.455947.com-跑马三分钟彩票计划| www.334329.com-彩票网站不给提现| www.449787.com-彩乐网现场报码| www.670566.com-法国时时彩资料| www.429408.com-陕西乐彩-| www.563909.com-稳赚体彩竞猜平台| www.660548.com-彩票怎样杀号| www.756255.com-中彩为公-| www.835863.com-丰彩中一百万| www.903728.com-9万彩票下载地址| www.ds73.com-彩福彩票-| www.c21.hk-黑彩举报电话是多少| www.06561.com-3d第彩吧第二版| www.08hz.com-福彩3d晚秋字谜| www.323456.cc-七乐彩摇奖直播现场| www.455985.com-手机买彩票如何兑奖| www.579275.com-投彩网彩票投注站点| www.370727.com-重庆时时彩票真实吗| www.655560.com-网易资讯彩票| www.781453.com-卓易彩票pc版| www.854442.com-湖北快三冷号统计表| www.923422.com-黑彩赢钱不黑提款| www.975240.com-体彩自助兑奖| www.ie7.cc-新内蒙古快三开奖| 网易彩票www.083wy.com| www.7764.com-快三咋中奖-| www.838481.com-海南七星彩今日开奖| www.882914.com-彩票一倍流水啥意思| 财神网www.29277r.com| www.mh25.com-福彩、快3app| www.14666.com-研究彩票有成功的吗| www.86089.com-南京三彩折扣店| www.51263.cc-1166彩票-| 彩民网www.76520w.com| www.pw97.com-彩票九下载-| www.089610.com-重庆时时彩必输原理| www.0034.xyz-好听的关于彩票名字| www.7285.cn-小鸡彩虹片头曲| www.0379.tv-快三讲解分解教学| www.6058.vip-彩票破损还能兑奖吗| www.27793.cc-体彩三个红号算吗| www.298366.com-更多精彩-| www.144148.com-竞彩混合怎么算中奖| www.237835.com-五分彩是正规彩票吗| www.338460.com-易彩票网址下载| www.448022.com-老杜说彩票视频| www.576475.com-唐山福彩-| www.662233.com-乐8网彩票是真的吗| www.785868.com-今日体彩排列三图谜| www.361759.com-福利吧全彩漫画| www.7326.cn-彩红时时彩官方网站| www.fk99.com-大奖彩票棋牌| www.30tv.com-七彩玫瑰花-| www.27442.com-新浪杨震足彩预测| www.038852.com-彩票助赢手机版图标| www.006757.com-彩界过客胆码预测| www.41768.com-app买不了足彩| www.9950.loan-福彩3d诗句-| www.555877.com-777乐彩网-| www.676446.com-福利彩票每期销售额| www.99695.com-彩16幸运28下载| www.254035.com-七星彩早彩版专区| www.78gq.com-欧洲足彩app| www.tt79.com-易彩2.0app-| www.177661.com-快三单双计算方法| www.833776.com-福彩平台刷水| www.654338.com-玩易彩-| www.341197.com-我想减猜一体彩术语| www.018452.com-香港官方直营网彩票| www.071455.com-怎么下载天天中彩票| www.cai3383.com老时时彩-| www.902559.com-微信买江苏快三赚钱| www.995729.com-足彩只买平局能赚6| www.7614.pw-爱盈彩是什么平台| www.54311.cc-2628彩下载-| www.341542.com-一定牛彩票真假问题| 中国福利彩票www.08588x.com| www.154355.com-彩票一个数字怎么选| www.140856.com-海南七星彩彩版专区| www.816293.com-吉林省快三预测| www.rj75.com-彩种齐全-| www.8037.vip-福建爱彩乐-| www.582.in-彩票玩套彩什么意思| www.993465.com-足彩怎么兑奖| www.98ft.com-体彩3d星期走势| www.8691.top-七乐彩2拖9-| www.262611.com-微信快三群犯法吗|