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.856111.cc-福少时时彩计划软件| www.973263.com-彩虹岛免费接单平台| www.cp824.cc-快彩官网-| www.037363.com-高手网彩票资料大全| www.878327.cc-内蒙古福利彩票3d| www.4uq.com-网上兼职福利彩票| www.35222.cc-天津体彩官网| www.169847.com-查一下甘肃快三| www.ff35.cc-七星彩头奖表| www.8jg.com-女网友网上彩票| www.95sl.com-鸿鑫娱乐时时彩| www.or49.com-彩票开奖走势图3d| www.907936.com-合肥体彩销售在哪办| www.af45.com-体彩排列3开奖查询| www.058089.com-众乐彩票里面买快三| www.822055.com-福彩3d奖金设置| www.946062.com-福建体彩彩民聊天室| www.nx97.com-竞彩足球任选九| www.220053.com-大快三下载-| www.2556.cn-七星彩交流区| www.02pn.com-万彩吧彩票开奖记录| www.550318.com-优彩环保-| www.656702.com-欧洲杯彩票app| www.807229.com-温州福利彩票中心| www.932562.com-彩民之星破解版| 网易彩票www.36788s.com| www.84iw.com-8848彩票大厅| www.6221.net-关於台湾彩券| www.32404.com-足彩分析工具| www.003906.com-百博海南七星彩| www.69093.com-网上美女买彩票| www.2112.in-足彩365不能买| www.30221.com-福彩门户最新书签| www.019476.com-专业彩吧助手吧| www.15cr.com-男方分手要彩礼钱吗| www.552265.com-万彩吧开奖结果下| www.vn46.com-湖北快三快赢网推荐| www.82gc.com-微信买竞彩-| www.7089.net-武康七彩假日宾馆| www.ak64.com-特区论坛七星彩论坛| www.927996.com-51亿彩票巨奖骗局| 大赢家彩票平台www.810877.com| www.230.cm-官方售彩网站| www.pr86.com-go彩平台-| www.095185.com-竞猜彩足球-| www.208422.com-彩票专业彩吧助手| www.920621.com-甘肃福彩app下载| www.4749.net-彩票买不了了吗| www.608728.com-尚未派彩是什么意思| www.728424.com-重庆福利彩票双色球| www.817841.com-足彩19031推荐| www.922750.com-彩票全讯平台| www.338392.com-七乐彩专家杀号汇总| www.535697.com-姓名出彩票-| www.484364.com-好彩票苹果app| www.265883.com-宁夏银川福彩中心| www.338724.com-二分彩票查询双色球| www.447331.com-众彩网被骗的| www.535178.com-时时彩黄金分割教程| www.502593.com-星际彩票不让提现| www.019996.com-体彩排列3现场开奖| JJ彩票www.22505.cc| www.zz36.cc-如何开好体彩店| www.88fo.com-众购彩票平台登录| www.010206.com-福利彩票加盟多少钱| www.144015.com-鼎盛彩票网是真的吗| www.918712.com-海南博彩-| 杏彩www.00840t.com| www.kk07.cc-快三网络平台高赔率| www.860033.com-快三和值大小计算| www.750213.com-大乐透彩票解码器| www.031505.com-网络彩票属于赌博吗| www.1335.cm-福彩几个号码才有奖| www.983236.com-彩票38彩票领导者| www.m32.space-体彩官网哪个靠谱| www.77ei.com-万彩办公大师安卓版| www.139943.com-彩16怎么下载地址| www.265963.com-福彩代理怎么弄| www.82zu.com-彩云网盘-| www.5969.cc-足彩北京单场| www.89260.com-查彩票用什么软件| www.634.club-得彩票横财的八字| www.02602.com-ok彩票安卓-| www.ih60.com-中国体育彩票竞猜吧| www.23rm.com-相富年图彩之网今天| www.36594.com-澳博彩票有限公司网| www.10et.com-福利彩票四等奖领奖| www.833.red-北京二八彩票| www.5251.me-7k彩票网a-| www.371155.com-彩铅樱花树图片| www.526584.com-厦门彩票怎么样| www.cai6944.com江西快三走势图形态| www.091103.com-易盈彩票正规吗| www.302358.com-百彩网天空免费彩票| www.719725.com-手机快3福彩| www.787779.com-310足彩网下载| www.26bs.com-彩票牌照2019| www.625261.com-苏宁布局彩票店加盟| www.683280.com-义乌市体彩办理处| www.751413.com-淘金彩票有挂吗| www.805339.com-中超竞彩足球| www.867247.com-快三如何赢钱保盈| www.917320.com-必赢彩票软件| www.969342.com-梅州市福彩中心| 彩世界www.99788l.com| www.970634.com-彩票团队群-| www.ma85.com-百盈快三计划网页| www.719572.com-三d福彩报纸| www.839252.com-足球胜负彩赛果走势| www.960029.com-好彩彩吧-| www.am51.com-浙江福彩12选5| www.72372.com-福彩官方投注软件| www.799830.com-体育彩票开奖玩法| www.898890.com-王牌彩票下载安装| www.961725.com-3d福彩图-| 500万彩票www.96386f.com| www.786753.com-华夏彩票计划真假| www.99293.cc-2d福彩奖金规则| www.902314.com-我正在黑彩赚钱了| 彩乐坊www.00clf.com| www.222087.com-北京体彩网官方网站| www.345100.cc-0345大发彩票| www.494812.com-足球竞彩二串一推荐| www.1084.xyz-分分彩赌输-| www.73731.com-闽南泉州体彩聊天室| www.328608.com-福彩快3技巧与规律| www.cp163.com-新吉林快三走势图| www.22827.com-中彩那天的词语组词| www.62568.com-福建即乐彩十一选五| www.761754.com-体彩走势图家彩网| www.484749.com-彩票注数和每注金额| www.600952.com-求彩票网站-| www.848564.com-时时彩好平台| www.75px.com-足彩十四场及时比分| www.0845.vip-哪个平台能买足彩| www.025901.com-福彩3d组选热号| www.101066.com-大乐透彩票-| www.197449.com-华人官方彩票登陆| www.435034.com-虹桥的彩票专栏| www.31975.com-彩票360彩票| www.905372.com-网络足彩-| www.387193.com-987彩票平台| www.536329.com-福彩1d怎么买| www.626694.com-河北福彩2o选5| www.687718.com-3d彩票几点开奖| www.768769.com-8k彩票网址-| www.855136.com-爱彩彩票是真是假| www.924267.com-全民快三聊天室| www.973306.com-彩虹岛游侠-| www.dr5.cc-吉首商业城快三秒| www.qf54.com-彩票55app苹果| www.660401.com-购彩v是骗局吗| 彩之家www.19czj.com| www.973312.com-废彩票变工艺品| www.rg53.com-安徽快三彩彩乐| www.aq85.com-内蒙古福彩快三开奖| www.04ni.com-容易临摹的彩铅名画| www.769023.com-凤凰娱乐彩票下载| www.883564.com-博瑞彩票app下载| www.965543.com-彩八彩票苹果版| 百姓彩票www.bxcp3.com| www.eq15.com-中华彩票网-| www.16865.cc-v98彩票下载| www.599386.com-百盈快三的投注规律|