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.421199.com-足彩金手指-| www.639904.com-东方彩票下载手机版| www.762235.com-彩票万博正规平台么| www.857559.com-全民彩票暂停销售| www.942019.com-帮买彩票赚佣金揭秘| www.ek10.com-彩吧论坛图谜总汇| www.97477.com-重庆时时彩前三走| www.na69.com-093彩票安卓版| www.072204.com-开彩票店怎么提成| www.05858.com-福彩3d购买了| www.dv07.com-爱刮刮自助彩票机| www.65dw.com-怎样微信购彩票| www.cp2979.com-英国时时彩开奖记录| www.909360.com-彩吧3d谜图第五版| www.321.tv-台湾福星彩图库| 500万彩票www.39500n.com| www.94eo.com-易记彩票可靠吗| www.22618.cc-福彩3d全天计划群| www.058265.com-中彩票的都是什么命| www.372295.com-贵州遗漏快三| www.572361.com-彩票开奖计划软件| www.681192.com-彩票买哪个比较好| www.022976.com-利澳彩票不能提现| www.n02.com-黑彩稳定平台| www.20283.com-足球彩票预测推荐| www.7189.xyz-七彩印象香烟价格| www.335170.com-数字彩票怎么玩的| www.270608.com-彩票助手app| www.964600.com-体彩开奖规则和奖金| www.yg73.com-倍投快三-| www.5642.vip-河南快三中2个数| www.140883.com-海口七星彩彩版专区| www.716956.com-初学者彩铅推荐| www.9977.cm-搏彩老头的彩票专栏| www.303281.com-广东福彩好彩3奖金| www.517066.com-河北福彩开奖信息| www.762735.com-齐鲁彩票双色球开奖| www.952845.com-9号彩票官方| www.ta58.com-什么彩票是六位数| www.ua21.com-竞彩足球球赛改期| www.s90.cc-彩票中奖恶搞| www.148.in-彩虹的了解-| www.019330.com-贵阳福利彩票| www.779803.com-三弟福利彩票| www.62319.cc-浙江快乐彩直播| www.185478.com-江苏快三是赌博吗| www.789061.com-足彩竞猜胜负下载| www.897046.com-秒速高频彩长龙提醒| www.971648.com-爱玩彩票官方| www.mg04.com-河北快三三同号通选| www.30np.com-极速分分彩官方开奖| www.191234.com-上海快三兑奖规则| www.07688.cc-中彩那天优秀导入| www.448661.com-中国彩票是合法的吗| www.fj18.com-分分快三软件| www.np12.com-福彩3d手机版预测| www.p85.com-福彩快三坑人么| www.800123.cc-谁能制作快三走势图| www.934139.com-快三大小倍投方法| www.63ev.com-做彩票任务平台| www.02586.com-哪些网上彩票公司| www.828226.com-吉彩宝彩民版| www.985592.com-竞彩足球对阵表让球| www.051110.com-真实的彩票软件网站| www.006242.com-国外彩票网站大全| www.95508.com-福利彩票基金用途| www.704906.com-快三彩8网站| www.mb42.com-一分快三怎么看豹子| www.005287.com-快三追号-| www.731.website代打彩票兼职| www.562293.com-上海体彩购买网站| www.688806.cc-体彩360导航| www.ip73.com-乐乐彩票是不是真的| www.393369.com-彩铅画动漫眼睛教程| www.855073.com-中奖彩票故事| www.988878.com-什么是黑彩票| www.ug3.cc-湖北福彩百宝彩快三| www.179067.com-安徽省快三一定牛| www.822165.com-购彩助手软件手机版| www.987298.com-湖南省福利彩票兑奖| www.dg71.cc-瑞彩祥云是黑彩吗| www.19yt.com-自动挂机彩票| www.41487.com-彩票直通车可信| www.117083.com-微信彩票林老师| www.200825.com-买彩票顺口溜| www.293122.com-太湖字谜多彩网| www.365391.cc-双色预测彩经网| www.123797.com-彩票ag官方网站| www.197151.com-78彩-| www.258172.com-快三计划苹果手机版| www.rf96.com-168彩票安卓版| www.5ls.com-常州体彩兑奖地址| www.859640.com-快三开奖福建| 500彩票www.343177.com| www.0759.la-8k彩票安卓下载| www.771791.com-腾龙时时彩做号官方| www.840728.com-卡姿兰彩妆套装怎样| www.ja17.com-福彩3d规则-| www.872096.com-彩票达人软件下载| 中彩网www.71233z.com| www.346.pw-55世纪购彩合法吗| www.325802.com-体彩排三彩经网| www.516256.com-中发彩票怎么下载| www.1kr.cc-3d胆码牛彩总汇| www.203334.com-彩神3app-| www.21362.cc-彩票跨度选号技巧| www.176583.com-福彩湖北快三一定牛| www.766.com-时时彩360遗漏| www.9950.online今晚彩票图纸| www.74063.com-同志彩虹旗高清壁纸| www.036508.com-竞彩足球彩票预测| www.800435.com-1号彩票平台| www.898525.com-3d彩民乐-| www.jg81.com-天天中国福利彩票| www.80200.com-体彩大乐透选号方法| www.02369.com-2mcc彩票下截| www.946502.com-中国福利彩票生肖| www.020.cc-港彩高手论坛网址| www.360354.com-体肓彩票玩法| www.431921.com-亚盘和竞彩是啥意思| www.911100.com-浙江温州快三| www.962747.com-3d彩圣字谜总汇| 博盈彩票www.183380.com| www.3315.com-汇彩网入口-| www.7897.cc-什么平台有香港快三| 网易彩票www.191065.com| www.cp5911.com-彩票预测软件手机版| www.383680.com-彩世界下载安装| www.487380.com-代打福利彩票游戏| www.549558.com-买足彩中的看什么| www.774585.com-七星彩查询是否中奖| www.82ix.com-俄罗斯28彩票计划| www.836227.com-彩票三对迷低今天的| www.906202.com-彩票105-| www.970991.com-u9彩票网站靠谱吗| www.ak31.com-七星彩开过重号码| www.f56.com-体彩中奖号码| www.330231.com-快三速查表-| www.461382.com-体彩排列三兑奖时间| www.060759.com-竞彩附近体彩店| www.211696.com-湖北快三必出号码| www.329526.com-谦喜彩票导航页| www.87591.com-开体育彩票竞彩店| www.526249.com-私彩代理结构| www.001271.com-返点高的彩票| www.jh62.com-百度福彩3d字迷| www.93711.com-广西福彩七乐彩| 500彩票www.342677.com| www.xt12.com-彩虹六号腾讯| www.54lz.com-甘肃福彩票-| www.1950.biz-彩票应用软件排行| www.446410.com-无损对刷彩票| www.810680.com-天津市体彩中心电话| www.950742.com-网上赌快三会被捉吗| www.lh9.com-彩票快三技-| www.449101.com-最专业高频彩种| www.x01.top-适合学生的彩票软件| www.71wp.com-如何看体彩走势图| www.4802.vip-彩虹六号直播解禁| www.713071.com-快三是什么样的赌博| www.837651.com-福利彩票三地红圣手| www.950364.com-七星彩上期开奖结束| www.oi10.com-福彩3d晚秋和值谜| www.647522.com-胜负彩奖金-|