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.4705.top-也买彩是骗局吗| www.52372.cc-天猫彩票是真的吗| www.752738.com-玩彩票软件是什么| www.53526.cc-丰大彩票app| www.750337.com-北京单场彩开奖| www.510414.com-时时彩能挣钱吗| www.596573.com-快彩网平台怎么样| www.731143.com-福利彩票快三店转让| www.811881.com-足彩310直播| www.919195.com-时时彩排名平台| 爱购彩票www.3552a.com| www.589917.com-胜负彩19056| www.649368.com-正好彩票网黑龙江| www.74487.com-中国足彩网彩票官网| www.73787.com-9188彩票下载| www.528396.com-五彩神牛字谜今日| www.687517.com-彩吧助手走势图势图| www.833309.com-彩友多店铺号| www.953619.com-中免红好彩什么味道| www.jq7.com-福彩3d专家预测| www.88251.com-提现秒到的彩票平台| www.526932.com-百信彩票下载安装| www.655988.com-彩票软件编写| www.737655.com-关于q彩网-| www.809375.com-博众时时彩软件骗局| www.881586.com-伟德彩-| www.863.cn-时时彩五星万能五码| www.e72.hk-福彩湖北基本走势图| www.8ln.com-凤凰极速快三网站| www.1249.pw-彩票中数字对应码号| www.013898.com-网络彩票代理违法吗| www.138795.com-同城彩票骗-| www.576652.com-福彩3b彩报| www.699267.com-重庆时彩注册平台| www.62ot.com-彩票个税-| www.01955.com-买彩票亏钱-| www.511239.com-雨后彩虹一类的网名| www.638535.com-色彩斑斓的释义| www.796252.com-盈彩吧是不是骗人的| www.878918.com-福体彩开奖公告| www.250062.com-甘肃快三推号技巧| www.371383.com-826彩票开奖网站| www.602207.com-黑彩提现被冻结| www.980468.com-广西体彩中心地址| www.072939.com-中国彩票中奖排名| www.241133.com-彩铅入门与技巧| www.085007.com-天天赢彩票登录| www.992878.com-福彩365安装| www.og93.com-福利彩票快三太假| www.08hs.com-七星彩在线阅读| www.73sq.com-大乐透中奖彩民图| www.78619.cc-福彩主任王素英家庭| www.518427.com-苹果x炫彩壁纸| www.1349.pro-以往福利彩票中奖号| www.130600.com-甘肃福易快三| www.289216.com-彩川ひなのiv| www.65qd.com-分分彩人工计划| www.25619.com-彩虹张惠妹| www.90ga.com-彩票社區-| www.634502.com-93彩票网app| www.3316.in-彩色简笔画动物| www.077058.com-12生肖彩票网| www.uq7.cc-福建体彩开奖查询| www.498457.com-5k彩票登录路线| www.32886.com-足球竞彩网官网| www.039866.com-华夏彩票平台官网| www.268195.com-天吉彩吧论坛首页| www.036355.com-九七年彩银熊猫银币| www.804627.com-体彩排三双双字谜| www.rw35.com-快三定胆奖多少钱| www.738889.com-江苏快三微信群跟买| www.911141.com-福彩公益活动| www.993331.cc-足彩技巧pdf下载| www.nu95.com-吉林快三走势图今天| www.438.bid-网上赌彩票判多少年| www.506736.com-天空彩票天下彩旧版| www.em69.com-南方彩票网-| www.888098.com-牛票票彩票社区网| www.973571.com-好看的雨后彩虹图片| www.cp3208.com-福建快三综合走势图| www.515956.com-足彩群骗局揭秘| www.592448.com-清乾隆釉彩大瓶| www.676387.com-hs5彩票-| www.806963.com-中奖彩票能折吗| www.883464.com-彩网在线视频| www.t12.com-支付宝彩票最大奖| www.099061.com-代玩彩票靠谱吗| www.ql01.com-北京福彩一定牛快3| www.863532.com-怎么举报彩票网站| www.202268.com-贵州中彩票-| www.jk74.com-快三赚钱方法大全| www.wd11.com-彩票往期开奖结果| www.982604.com-各省彩票中大奖情况| www.567351.com-南京中奖的彩票站| www.112449.com-135彩票优惠活动| www.327714.com-体彩福彩开将结果| www.002455.com-七星彩走势图表连线| www.008044.com-东北辽宁彩票快三| www.266814.com-体彩排三走势图| www.791665.com-福彩3d网站大全| www.934447.com-跟彩票托摊牌| www.988145.com-佰萬彩票官网| www.at91.com-利奥彩票平台下载| www.082173.com-彩73彩票网站| www.920161.com-彩票网平台开发| www.982311.com-体彩中奖上哪领奖| www.aw58.com-上海福彩基诺走势图| www.903930.com-手机购彩快3| www.980947.com-彩788网站链接| www.oi01.com-顶呱刮彩票-| www.078929.com-体星彩7开奖结果| www.591291.com-竞彩输钱了千万| www.385396.com-酷彩吧网页版登陆| www.567164.com-彩虹6号季票价格| www.650587.com-海南彩票开奖时间| www.793519.com-19042足彩临场| www.556.live-时时彩怎样算豹子| www.4930.win-01彩票的官方网址| www.154944.com-竞彩单关历史| www.506253.com-轩彩娱乐网页版登录| www.509400.com-体育彩票百家号| www.400500.com-彩票中奖图片最新款| www.75335.cc-彩报第三版图| www.54ik.com-唏关彩先锋影音| www.1628.vip-微购彩app-| www.r21.xyz-大发快三是私彩吗| www.78175.com-中国福彩3d图纸| www.700411.cc-大发专业购彩平台| www.43sf.com-足彩复式最大| www.365782.com-大众彩票手机客户端| www.7065.vip-幸运彩高手-| www.7880.vip-广东时时彩开奖号码| www.61738.com-领航彩是什么软件| www.39725.com-玩时时彩有赢钱的吗| www.031771.com-下彩网网址-| www.6873.cc-258竞彩官网首页| www.35631.cc-吉祥彩娱乐平台代理| www.939013.com-612彩票-| www.678978.com-彩票101-| www.ec58.com-分分快三正规吗| www.td54.com-彩票以后会倒闭吗| www.204545.com-江西体彩网官方首页| www.202770.com-贵阳福利彩票总店| www.196953.com-竞彩8串1-| www.299653.com-下彩网客户端下载| www.413675.com-时时彩八码单期计划| www.60189.com-校长福彩预测今天| www.056508.com-21选1彩票走势图| www.231256.com-百胜快三在线登录| www.537217.com-彩色是不是一种颜色| www.629856.com-超高吉林快三app| www.700863.com-福彩3天天彩图| www.801633.com-云南彩票弃奖| www.876644.com-休体彩5d开奖结果| www.935332.com-甘肃快三和值推荐| www.984670.com-彩虹团队的骗局| www.cp685.com-快三平台有哪些| www.ok18.cc-福彩能在手机上买吗| www.96133.cc-体彩活动结束了吗| www.356469.com-消费送彩票活动| www.477335.com-湖北福彩返点| www.558122.com-今晚地下六仺彩开奖| www.797972.com-博彩源码交易| www.751463.com-2020网络彩票|