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.5307.cn-菲律宾五分彩走势图| www.308523.com-广东竞彩快三查询| www.81552.com-云南时时彩官网| www.649926.com-竞彩足球3串1技巧| www.753666.cc-福彩三地图谜2版| www.969229.com-中神彩下载-| www.fd01.com-快三彩票加盟条件| www.25rh.com-华彩人生新版本官方| www.389733.com-郑州彩票店铺转让| www.0318.date-彩虹的约定歌词儿歌| www.812923.com-足彩预测单场专家| www.198404.com-大发快三先赢后输| www.861155.com-五分⑥和彩在哪里下| www.962951.com-南方彩乐乐杀号专家| www.cp682.com-快三网站有哪些| www.585611.com-生财有道彩票网| www.443735.com-cai35彩票-| www.563456.cc-新浪技彩票频道| www.650280.com-彩虹伞的户外玩法| www.727028.com-乐彩网彩票论坛| www.623204.com-摇发彩票听过吗| www.726517.com-乐山快三是假的吗| www.813454.com-天气网福彩3d| www.889049.com-帮别人时时彩下单| www.1981.date-58cc赢彩彩票| www.00080.cc-高盛时时彩蜂巢团队| www.54233.com-中国体育彩票图标| www.005980.com-体育彩票大乐透吧| www.193781.com-吉林省福彩中心电话| www.gm66.com-彩礼39999寓意| www.56fu.com-福彩刮刮乐网上试刮| www.609152.com-彩票店开门时间| www.693288.com-网上彩代理| www.789679.com-网易红彩专家靠谱吗| www.864432.com-新彩吧手机版福彩| www.926669.com-彩票降价-| www.978312.com-9a彩票app-| www.cp9579.com-中彩网是不是合法的| www.pd11.com-彩票网络购买平台| www.1549.pw-大乐透试机号彩经网| www.9378.onlinek彩票登录-| www.cp1515.com-安徽福彩快3走势图| www.123449.cc-台湾福彩开奖记录| www.9119.tv-宁海体彩店无权| www.76238.com-新浪博客熊瞎子说彩| www.989490.com-福彩双色球四幻球| www.er44.com-今天体彩独胆| www.wz95.cc-七星彩今天预测号码| www.36iw.com-乐利2分彩开奖结果| www.514.me-时时彩整改-| www.3880.biz-顶呱刮彩票招财猫| www.10942.cc-500万彩票网手机| www.56563.com-盛源彩票手机app| www.330876.com-好游快爆下载乐彩网| www.04172.com-黑龙江彩22选5| www.661037.com-九宫图买彩票| www.593802.com-七彩教育网-| www.474.net-福利彩票宣传广告语| www.o22.shop-分分彩app-| www.93237.com-世界杯彩票竞彩足球| www.101075.com-网上赌快三会被捉吗| www.223092.com-3d福彩开奖结果| www.298751.com-幸运彩票官网| www.689052.com-彩168网-| www.804221.com-天盛网彩票托| www.922783.com-福利彩票站转让费| www.cp3329.com-福利彩票一分快三| www.169538.com-甘肃快三-| www.042654.com-福彩广告词怎么写| www.4006.vip-竞彩足球害人| www.20121.com-今日足彩推荐网易| www.78339.cc-乐享竞彩是什么| www.947716.com-多彩贵州颜色的象征| www.442235.com-农村结婚彩礼图片| www.327037.com-竞彩新规定-| www.206680.com-彩票分析软件原理| www.807326.com-福乐彩28-| www.8182.wang-玖亿彩票是真是假| www.386342.com-下载123彩票| www.ex41.com-uu快三彩票-| www.1338.xyz-全部天天彩票下载| www.1389.cc-水彩花卉装饰画| www.349699.com-刘谦预言彩票| www.830409.com-来彩彩票o2o| www.831517.com-竞彩场次怎么少了| 大赢家彩票www.399046.com| www.909908.com-贵州彩票快3查询| 彩乐乐www.www.3005w.com| www.ub90.com-快三最长连续多少期| www.3025.com-福彩3d夸度走式图| www.36337.cc-今天福彩出什么号| www.258551.com-今天竞彩足球推荐| www.860099.com-破解快三软件下载| www.711967.com-因彩礼钱分手| www.506172.com-时时彩平台登录注册| www.040034.com-福利彩票销售系统| www.296512.com-江苏e球彩奖金表| www.165063.com-彩票01是什么东西| www.729142.com-体彩大乐透开奖信息| www.132994.com-哪里买足彩-| www.007.com-c29彩票官方首页| www.578585.com-779木漫画全彩| www.70044.com-时时彩后三胆码| www.698725.com-华夏彩票提现不了| www.860235.com-网上彩票软件下载| www.610160.com-为什么很多人买彩票| www.947397.com-福彩七加一开奖结果| www.268653.com-体彩助手-| www.701707.com-买福利彩票软件下载| www.063227.com-济南牛旺庄彩票| www.654931.com-宁夏福彩快三头| www.87ny.com-怎样在淘宝买彩票| www.93617.cc-山东彩票双色球开奖| www.666676.cc-和乐彩票平台合法吗| www.874552.com-大优彩票平台| www.381399.com-泰安东彩票站位置| www.857696.com-做梦梦见买彩票| www.772836.com-自助申请app彩金| www.66262.com-龙腾时时彩做号工具| www.up93.com-试机号绕胆图彩之网| www.ce30.com-快三亏-| www.755780.com-好彩网天宇和值谜| www.887397.com-下彩彩票网址| www.91124.com-焕彩美容学校| www.626325.com-博9彩票-| www.658875.com-七星彩历史码| www.2168.net-恩施七彩野山鸡养殖| www.3998.bid-澳门六福彩-| www.7976.com-博万通彩票app| www.987745.com-乐米彩票安全吗| www.067039.com-福彩3d智能杀号| 大赢家彩票www.546411.com| www.1bg.com-彩票冷热什么意思| www.0096.me-彩票店起什么名字好| www.9582.biz-福彩幸运农场追号| www.fw54.com-旺彩电脑版-| www.671209.com-彩易网大乐透预测| www.799941.com-浙江福彩一定牛| www.2791.pw-网上买体彩靠谱吗| www.773708.com-500彩票大发3| www.984386.com-亚博彩票app下载| www.kp88.cc-彩票走势图制作软件| www.671423.com-讽刺农村彩礼的说说| www.698016.com-生肖彩开奖现场直播| www.942898.com-南宁福彩中心| www.5558.vip-幸福彩手机报3d| www.vx78.com-贵州省福彩中心领导| www.md78.com-快三倍投技巧| www.07wd.com-刚力彩芽影视作品| www.7810.vip-老彩民的玩彩心得| www.5585.pw-套彩什么意思| www.317298.com-内蒙快三360| www.cr28.com-彩客网合法吗| www.918.bid-彩虹羽泉简谱| www.506297.com-吉林快三豹子历史| www.617797.com-陕西省体彩-| www.123387.com-台湾今彩-| www.241601.com-快三和值表下载| www.365484.cc-彩票开奖杳5| www.202444.com-体彩和福彩哪个真实| www.353593.com-中国体彩的老板是谁| www.761971.com-竞彩足彩下载| www.73285.com-体彩3d过滤器| www.069563.cc-743彩票-|