QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 导航菜单 > jquery左侧分类导航菜单和图片轮播滚动布局代码

原创商用 jquery左侧分类导航菜单和图片轮播滚动布局代码

jquery 实现 左侧固定二级菜单导航和带左右按钮控制图片轮播滚动代码布局, 基于superslide开发的js css 分离,结构简单清晰,下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link href="css/style.css" rel="stylesheet" type="text/css"/>

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

3、body引入HTML代码

<div class="city-nav-header">
	<div class="city-nav-list">
		<a href="#">
			<img src="images/icon-001.png" alt="">课程中心
		
		</a>
		<div class="city-nav-left">
			<dl>
				<dd>
					<a href="#" class="arrow">
						<img src="images/icon-002.png" alt="">软件水平考试
					
					</a>
					<ul class="city-nav-casket">
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">高 级:</a>
						</li>
						<li>
							<a href="#">系统分析师</a>
						</li>
						<li>
							<a href="#">信息系统项目管理师</a>
						</li>
						<li>
							<a href="#">网络规划设计师</a>
						</li>
						<li>
							<a href="#">系统架构设计师</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">系统规划与管理师</a>
						</li>
						<div class="clearfix"></div>
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">中 级:</a>
						</li>
						<li>
							<a href="#">系统集成项目管理工程师 </a>
						</li>
						<li>
							<a href="#">软件设计师网络工程师</a>
						</li>
						<li>
							<a href="#">信息系统监理师</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">信息系统管理工程师</a>
						</li>
						<li>
							<a href="#">电子商务设计师</a>
						</li>
						<li>
							<a href="#">软件评测师</a>
						</li>
						<li>
							<a href="#">信息安全工程师</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">数据库系统工程师</a>
						</li>
						<li>
							<a href="#">嵌入式系统设计师</a>
						</li>
						<div class="clearfix"></div>
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">初 级:</a>
						</li>
						<li>
							<a href="#">程序员</a>
						</li>
						<li>
							<a href="#">网络管理员</a>
						</li>
						<li>
							<a href="#">信息处理技术员</a>
						</li>
						<li>
							<a href="#">信息系统运行管理员</a>
						</li>
						<div class="clearfix"></div>
					</ul>
				</dd>
				<dd>
					<a href="#">
						<img src="images/icon-003.png" alt="">二级建造师
					
					</a>
					<ul class="city-nav-casket">
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">公 共:</a>
						</li>
						<li>
							<a href="#">工程法规</a>
						</li>
						<li>
							<a href="#">施工管理</a>
						</li>
						<div class="clearfix"></div>
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">实 务:</a>
						</li>
						<li>
							<a href="#">建筑工程 </a>
						</li>
						<li>
							<a href="#">市政工程</a>
						</li>
						<li>
							<a href="#">机电工程</a>
						</li>
						<li>
							<a href="#">公路工程</a>
						</li>
						<li>
							<a href="#">水利水电工程</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">矿业工程</a>
						</li>
						<div class="clearfix"></div>
					</ul>
				</dd>
				<dd>
					<a href="#">
						<img src="images/icon-004.png" alt="">一级建造师
					
					</a>
					<ul class="city-nav-casket">
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">公 共:</a>
						</li>
						<li>
							<a href="#">工程法规</a>
						</li>
						<li>
							<a href="#">施工管理</a>
						</li>
						<div class="clearfix"></div>
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">实 务:</a>
						</li>
						<li>
							<a href="#">建筑工程 </a>
						</li>
						<li>
							<a href="#">市政工程</a>
						</li>
						<li>
							<a href="#">机电工程</a>
						</li>
						<li>
							<a href="#">公路工程</a>
						</li>
						<li>
							<a href="#">水利水电工程</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">矿业工程</a>
						</li>
						<div class="clearfix"></div>
					</ul>
				</dd>
				<dd>
					<a href="#">
						<img src="images/icon-005.png" alt="">通信水平考试
					
					</a>
					<ul class="city-nav-casket">
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">公 共:</a>
						</li>
						<li>
							<a href="#">工程法规</a>
						</li>
						<li>
							<a href="#">施工管理</a>
						</li>
						<div class="clearfix"></div>
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">实 务:</a>
						</li>
						<li>
							<a href="#">建筑工程 </a>
						</li>
						<li>
							<a href="#">市政工程</a>
						</li>
						<li>
							<a href="#">机电工程</a>
						</li>
						<li>
							<a href="#">公路工程</a>
						</li>
						<li>
							<a href="#">水利水电工程</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">矿业工程</a>
						</li>
						<div class="clearfix"></div>
					</ul>
				</dd>
				<dd>
					<a href="#">
						<img src="images/icon-006.png" alt="">资格考试/考研
					
					</a>
					<ul class="city-nav-casket">
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">公 共:</a>
						</li>
						<li>
							<a href="#">工程法规</a>
						</li>
						<li>
							<a href="#">施工管理</a>
						</li>
						<div class="clearfix"></div>
						<li style="border-right: none;padding-right: 0;">
							<a href="#" style="color:#666">实 务:</a>
						</li>
						<li>
							<a href="#">建筑工程 </a>
						</li>
						<li>
							<a href="#">市政工程</a>
						</li>
						<li>
							<a href="#">机电工程</a>
						</li>
						<li>
							<a href="#">公路工程</a>
						</li>
						<li>
							<a href="#">水利水电工程</a>
						</li>
						<li style="padding-left:72px;">
							<a href="#">矿业工程</a>
						</li>
						<div class="clearfix"></div>
					</ul>
				</dd>
				<dd>
					<a href="#">
						<img src="images/icon-007.png" alt="">PMP/ACP/NPDP
					
					</a>
					<ul class="city-nav-casket" style="width:240px;">
						<li style="height: 32px; line-height: 32px;border-right: medium none;">
							<a href="#">PMP考试</a>
						</li>
						<li style="height: 32px; line-height: 32px;border-right: medium none;">
							<a href="#">ACP考试</a>
						</li>
						<li style="height: 32px; line-height: 32px;border-right: medium none;">
							<a href="#">NPDP考试</a>
						</li>
					</ul>
				</dd>
			</dl>
		</div>
	</div>
	<div class="city-nav-item">
		<a href="#">
			<i></i>
			免费公开课
		</a>
		<a href="#">学习包</a>
		<a href="#" style="color:#08acee">直播课堂</a>
		<a href="#">视频中心</a>
		<a href="#">云阅读</a>
		<a href="#">题库</a>
	</div>
</div>
<div class="city-slide">
	<div class="hd city-slide-header">
		<a class="prev" href="javascript:void(0)"></a>
		<a class="next" href="javascript:void(0)"></a>
	</div>
	<div class="bd city-slide-body">
		<ul>
			<li style="background:#bf271d">
				<a href="#">
					<img src="images/banner1.jpg" alt="">
				</a>
			</li>
			<li style="background:#0f2049">
				<a href="#">
					<img src="images/banner2.jpg" alt="">
				</a>
			</li>
			<li style="background:#d3ebfb">
				<a href="#">
					<img src="images/banner3.jpg" alt="">
				</a>
			</li>
			<li style="background:#7094fc">
				<a href="#">
					<img src="images/banner4.png" alt="">
				</a>
			</li>
			<li style="background:#44affc">
				<a href="#">
					<img src="images/banner5.jpg" alt="">
				</a>
			</li>
		</ul>
	</div>
</div>

<script type="text/javascript">
	jQuery(".city-nav-list").slide({
		type: "menu",
		titCell: "dd",
		targetCell: "ul",
		delayTime: 0,
		defaultPlay: false,
		returnDefault: true
	});

	jQuery(".city-slide").slide({
		mainCell: ".bd ul",
		effect: "fold",
		autoPlay: true,
		delayTime: 800
	});
</script> 
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
彩01彩票 www.537176.com-澳洲彩票开奖在哪看| www.16387.com-澳客彩网官网电脑版| www.j44.cc-十选五是什么彩票| www.759.date-078彩票一总经销| www.559238.com-乌海体彩中心| www.308586.com-彩35app-| www.426455.com-澳客彩票专家推荐| www.560975.com-南方双彩3d-| www.710368.com-彩票怎么对打套彩金| www.841617.com-福彩内部号是真的吗| www.949891.com-福彩8炫彩玩法| 融彩网www.rcw321.com| www.zz12.com-竞彩多久申请下来| www.83951.com-竞彩007-| www.931660.com-快中彩票app下载| www.23770.com-彩票微助手用途| www.80781.com-石家庄省福彩中心| www.wr37.com-可以追号的彩票平台| www.035181.com-玩彩票输得倾家荡产| www.526961.com-河内五分彩官网开奖| www.391404.com-三彩丽雪-| www.93fo.com-什么是彩色一寸照片| www.240.cm-重庆时时彩五分| www.1434.xyz-福彩20分钟-| www.4789.org-558彩票平台| www.63115.cc-安徽快3彩经网| www.159357.com-易发彩票分分快三| www.492564.com-牛网福彩杀码| www.974163.com-福彩刮刮奖品种| www.m84.cn-彩票开奖图-| www.7549.vip-竞彩政策-| www.00713.com-多彩烟蓝莓味多少钱| www.16qv.com-彩票开奖结果一等奖| www.036703.com-彩票榜cpbapp| www.143043.com-炫彩陀螺软件| www.642422.com-彩票6000万-| www.757569.com-福建体彩36+选7| www.697557.com-彩票联盟平台| www.al19.com-易彩票app下载| www.029544.com-利彩可以相信不| www.086872.com-飞鱼彩票怎么玩法| www.368963.com-go彩是真的吗| www.119379.com-5分钟一期的传统彩| www.4819.org-天子手游彩票app| www.96623.cc-什么叫福彩3d| www.026561.com-彩拾彩票的骗局揭秘| www.994010.com-彩票足球竞彩怎么玩| www.qh67.com-好彩香烟盒设计| www.04wd.com-竞彩足球投注网赠送| www.239509.com-快三计划师-| www.359019.com-赛果开奖彩客网| www.485901.com-福彩快三出球号顺序| www.90315.com-网易彩票网怎么注册| www.262536.com-下载彩九-| www.387287.com-彩票有私人开的吗| www.748977.com-查彩票网-| www.816397.com-福彩网一分钟开一次| www.890576.com-彩票大小1赔1| www.955200.com-新天地彩票平台注册| 6号彩票www.5484e.com| www.eu28.com-彩票助赢软件计划| www.704563.com-501彩票app-| www.815299.com-排列5福彩-| www.892900.com-彩票收米表情包| www.954513.com-cb8彩宝彩票| 华夏彩票www.hx1165.com| www.fn56.com-彩票1360-| www.yp50.com-快餐快三开奖结果| www.298231.com-东北快三官网| www.374300.com-6701彩票网官网| www.133065.com-彩钢板围挡施工图| www.8875.xyz-足彩半全场漏洞| www.5504.top-快三软件贴吧| www.460790.com-彩票站打票员体彩| www.582278.com-澳客足彩手机版| www.657847.com-情人节收到彩票| www.606794.com-福彩三d毒胆计划| www.678517.com-乐彩3d杀码-| www.760011.com-时彩计划-| www.830567.cc-印象彩票手机客户端| www.897025.com-快乐彩票大发快3| www.973513.com-儿童彩虹简笔画彩色| www.lo3.com-江苏快三时间调整| www.c66.top-百宝彩app-| www.523659.com-e彩在线手机版注册| www.607278.com-彩票团购群-| www.682987.com-中彩网最准单双| www.770826.com-辽宁省福彩举报电话| www.838153.com-499彩票-| www.895611.com-9999pp彩票-| www.953905.com-雷霆彩票-| www.999237.com-中彩谁家房什么意思| www.eg35.com-中国福利彩票6+1| www.yq15.com-彩票中奖哪里兑换| www.019701.com-福彩幸运农场高手群| www.r33.com-六冠彩票能提现吗| www.815023.com-腾讯彩票网官方端口| www.911669.com-境外彩票网站哪家好| www.970745.com-买彩票的技巧和方法| 乐8彩票www.538578.com| www.243672.com-一分快三下载网址| www.383280.com-彩票彩6下载安装| www.166314.com-快三开奖结果走势图| www.xc5.com-北京快三振幅走势| www.572351.com-360彩票开奖比对| www.657646.com-103亿彩票巨奖| www.723909.com-快三线上app下载| www.786908.com-彩票中奖概率计算| www.848744.com-时时彩送彩金40| www.900041.com-福彩申请电话号码| www.954315.com-西京时时彩新疆| www.0722.org-澳客彩票靠谱吗| www.9442.biz-信彩票软件下载| www.71906.com-懂彩帝ios最新| www.237309.com-彩票倍投是骗局揭秘| www.121620.com-马云的网上彩票| www.199972.com-安徽体彩网-| www.67112.cc-福彩3d表格-| www.071845.com-包头彩票店生意转让| www.948056.com-众彩网排列三| www.cai333.com-福彩快三骗局| www.589550.com-1183图库彩图| www.666148.com-福彩3d手机彩票| www.771479.com-彩票真有人中大奖吗| www.894012.com-财神彩票官方网站| www.971888.com-8号彩票有聊天室的| www.639794.com-牛牛彩代理-| www.771003.com-分分彩稳定计划软件| www.980962.com-彩票账号登录异常| www.57tp.com-支持花呗充值彩票| www.hp29.com-上海快三最好的技术| www.1we.com-内蒙古快三周公解彩| www.505926.com-福彩大案细节| www.616495.com-福利彩票网易开奖| www.031007.com-凤凰彩票是合法的吗| www.187936.com-重庆时时彩是合法吗| www.355013.com-乐彩网买彩票安全吗| www.ux60.com-老谢说彩150| www.05rl.com-初级水溶性彩铅画| www.85vu.com-官网福利彩票网址| www.958.la-七星彩复试计算器| www.900207.com-彩票计算-| www.081618.com-恒博彩票合法吗| www.835196.com-绿好彩香烟哪里买| www.987082.com-正规网购彩票平台| www.17ew.com-七乐彩如何看中奖| www.213.org-三毛彩吧二维码| www.323321.com-nba彩票下载| www.434558.com-周彩票-| www.111237.com-御彩轩破解版| www.954425.com-博发彩票的网址| 500彩票www.390477.com| www.7740.cm-摩根娱乐腾讯5分彩| www.308487.com-北京pk买彩票选号| www.73199.com-易彩完美修复补漆| www.10458.com-新浪爱彩足球推荐| www.52932.com-六全彩赌博案例| www.87813.com-彩票怎么避免花龙| www.028234.com-投彩是什么-| www.088342.com-699彩票网页版| www.65559.cc-吉林福彩块三形态图| www.666548.com-万达彩高手论| www.738281.com-福彩微信-| www.801632.com-数学对彩票-|