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.195822.cc-彩票开奖双色球玩法| www.865961.com-易迅彩票下载| www.879549.com-福彩3d牛材网预| www.001964.com-新浪手机网福彩| www.948615.com-彩票发行-| www.090980.com-广西南宁市福彩中心| www.237471.com-足球竞彩计算器| www.411382.com-七彩云南购物陷阱| www.572619.com-今晚福彩三d试机号| www.654172.com-福利彩票大乐透复| www.325424.com-体彩排列五现场直播| www.53tp.com-铜仁万山福彩| www.64410.com-360竞彩app-| www.806002.com-风云计划中华彩票| www.qb16.com-新彩网3d手机版| www.772025.com-多彩贵州航空| 500万彩票www.98528i.com| www.wn51.com-下载人人中彩票| www.72ks.com-体彩足球竞彩推荐| www.559125.com-火红彩票网官网| www.261532.com-大发快三网址注册| www.0895.date-华夏彩票快三技巧| www.074731.com-香港手机彩富网| www.186077.com-湖快三走式图| www.266143.com-体彩大乐透选号技巧| www.337249.com-香港电脑彩正版资料| www.110172.com-帝皇彩票下载安装| www.97046.com-彩票3d网上购买| www.151983.com-3d彩票软件27款| www.17280.com-中五亿美金彩票| www.022554.com-大彩网彩票| 中彩网www.81233j.com| www.121216.com-最霸气的彩票群名| www.208628.com-江苏快三开奖河北| www.276373.com-时时彩一码倍投方案| www.8451.org-王博彩王中王| www.929136.com-牛彩是真的吗| www.984220.com-惠州福利彩票| www.ll10.com-福利彩票网app| www.338166.com-福彩和值技巧大全| www.518770.com-万家彩票app下载| www.614847.com-福彩3d藏机图汇总| www.832060.com-093彩票群-| www.907753.com-福利彩票有什么玩法| www.973021.com-彩票带单老师违法| www.cp2979.com-英国时时彩开奖记录| www.vh74.com-江苏快三必中计划| www.295062.com-彩票中心手机客户端| www.nt19.com-苏州竞彩快三| www.90399.cc-福利彩票摇号机| www.74977.cc-分分彩输了怎么办| www.038266.com-手机app彩票| www.149492.com-优信彩票邀请码谁有| www.745508.com-购买彩票-| www.816789.com-网络快三输钱| www.qt06.com-福彩里有pc28吗| www.11467.com-刮刮乐福彩app| www.080995.com-彩票被骗如何追回| www.004249.com-彩神计划软件下载| www.11599.com-体彩排三专家推荐| www.700201.com-近期足彩开-| www.01732.com-足彩购买大厅| www.128943.com-福彩三d昨天开奖号| www.152735.com-cp121彩票网| www.158310.com-佬牛足彩18161| www.277666.cc-快三彩票被骗| www.574311.com-外国彩票牛人| www.14393.com-体彩排三开机号| www.699223.com-3d乐彩网论坛| www.232999.cc-体育彩票大乐透机选| www.407062.com-取消彩票平台代理| www.661912.com-福彩五分快三违法吗| www.518831.com-百度浙江男子中彩票| www.667180.com-福州体彩领奖地址| www.930224.com-快三可以网上买吗| www.25576.cc-手机彩客网足彩| www.254812.com-好彩堂平特一肖| www.369594.com-306cc彩票-| www.484814.cc-牛彩网福彩3d预测| www.557408.com-体彩排列5-| www.858503.com-今天的体彩中奖号码| www.923795.com-大快发3彩票必中| www.sd45.com-福彩三d中心开机号| www.985829.com-福彩3d詹天佑预测| www.38658.com-淘彩吧com-| www.021521.com-拉菲彩票下载| www.585422.com-爱彩乐天津快乐十分| www.676185.com-仲博彩票登录平台| www.768888.com-天猫彩票稳赚不赔| www.833361.com-彩票二维码不清晰| www.895212.com-优彩网彩票网址| www.952278.com-不停售的彩票app| www.996225.com-罗马彩票官方网站| www.rk0.com-快3彩票软件破解| www.139498.com-彩玉海棠价格| www.897506.com-九彩彩票是正规的吗| www.cai1112.com北京快三助手下载| www.110495.com-66彩票开奖直播| www.488590.com-喜彩彩票网-| www.568745.com-双色彩票开-| www.789106.com-足彩单关怎么玩| www.885013.com-北京爱乐彩官网| www.cp9772.com-青海快三历史走势图| www.12306.cc-258竞彩比分| www.2585.com-大兴彩票理财投资| www.76700.cc-彩票一360彩票| www.664892.com-生肖彩开奖必中六| www.775447.com-盈彩网网官网| www.873177.com-贵阳体育彩票兑奖| www.954087.com-5百万彩票开奖| www.cai248.com-一分快三开奖号码| www.690.in-超信彩票帮投| www.xd52.com-福彩快3几点到几点| www.562192.com-万彩大师激活码| www.964374.com-体彩app有哪些| www.cai35.cc-湖北精彩十分走势图| www.ir25.com-竞彩心理误差| www.81uq.com-工银e生活彩票| www.726438.com-无忧四溢彩-| www.885973.com-时时中彩票登陆平台| www.964337.com-幸运福星七星彩版| 凤凰彩票www.55228c.com| www.82rr.com-多彩3d字谜大全| 99彩票www.653355.com| www.719311.com-广东福利彩票| www.820014.com-跨省得彩票怎么兑奖| www.904055.com-大发快三模拟下载| www.969776.com-七乐彩胆拖5拖4| www.151663.com-多乐彩票-| www.024241.com-福彩3d全国最大奖| www.095228.com-浙江12选5爱乐彩| www.165239.com-马鞍山市体彩中心| www.955922.com-彩票程序排行榜| 九五彩票www.95111w.com| www.477322.com-彩神通代-| www.36607.com-3d澳门彩报图四4| www.82839.com-体彩中心地址电话| www.253657.com-竞彩足彩158下载| www.604145.com-新福彩3d字迷| www.04077.com-微信10元做彩票| www.832071.com-体育彩票竞彩官方网| www.908605.com-七星彩开什么奖| www.974752.com-中国体彩唯一官网| www.sc86.com-福彩3d和值字谜| www.26yy.com-中国彩票中奖排行| www.282.cn-彩票系统云创| www.05378.com-义乌福彩在线| www.871138.com-七星彩育彩票| www.985589.com-易彩网专业平台| www.uq4.com-彩票预测软件哪个好| www.870989.com-星河手机彩票投注| www.935386.com-苹果彩票使用手机版| www.979381.com-体彩七位数走势图表| www.cp195.cc-一网彩票-| www.947259.com-福建快三app下载| www.984595.com-彩虹网彩票正规吗| www.pt48.com-彩神v11-| www.193003.com-新疆福利彩票| www.6xi.cc-体彩竟猜官网| www.57656.com-中国彩吧一-| www.744485.com-彩虫手机版-| www.862318.com-乐彩开奖公告| 500彩票www.50788b.com| www.7325.cn-彩虹5号电池评测|