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天

知道了
爱彩票 www.7318.loan-小米彩虹电池耐用吗| www.96jw.com-87彩店邀请码浙江| www.524259.com-福利彩票3d天气网| www.027063.com-韩国快三计划| www.815402.com-福利彩票3d走势| www.933206.com-宝马彩票正规吗| 彩票坊www.022bj.cc| www.17881.cc-v8彩票提现不了| www.rh05.com-今日头条彩票| www.8903.top-射阳城西体育竞彩店| www.93249.com-彩票快3最晚到几点| www.333266.cc-彩彩票开奖查询l| www.cp0220.com-苹果系统快三助手| www.132077.com-河南濮阳各地彩礼| www.034965.com-至尊云彩票-| www.538722.com-时时彩害人案例| www.74441.cc-新彩365-| www.422032.com-新浪爱彩网app| www.564498.com-河内五分彩全天计划| www.00012.cc-怎么进入大盈彩票| www.9563.org-2019年彩票-| www.750850.com-9a彩票线路检测| www.399565.com-彩票平台代理加盟| www.991231.com-肥强竞彩12课堂| www.381378.com-买彩票如何选号| www.539191.cc-时时彩三星做号条件| www.3056.pw-体彩19069期| www.357156.com-幼师樱花彩铅情景画| www.53363.cc-时时彩中奖图片| www.3jf.com-热购彩票提现失败| www.49234.com-168彩票网安全吗| www.569091.com-体彩高频开奖调整| www.681529.com-豪彩娱乐坑了多少人| www.906028.com-浙江福彩快乐彩遗漏| www.979487.com-彩金列传完美通关| www.kt2.cc-时时彩长龙害死人| www.x28.org-078彩票总经销| www.08070.com-买彩票中奖的感觉| www.15809.com-98彩票网下载| www.4006.hk-西甲最大的博彩公司| www.9748.biz-苏会文七星彩预测| www.61br.com-c61彩票骗局| www.623215.com-3d天天彩报-| www.701011.com-七彩票开彩结果查询| www.783856.com-13亿彩票app| www.862912.com-肥城彩票3亿| www.939902.com-幸运彩票网注册| www.987093.com-乌鲁木齐快三| www.mf2.cc-360彩票走势图| www.qj21.com-丰彩彩票官网| www.10gh.com-租彩票平台可信吗| www.700926.com-新型体彩店-| www.932068.com-导师带福利彩票| www.mz7.com-三分快三app| www.9ow.com-七星彩怎样画规律| www.5150.cc-贵州快三最近30期| www.676800.com-彩票论坛马会| www.93xe.com-希腊五分彩app| www.6718.com-彩票招收兼职群| www.28398.com-香港49彩票网站| www.001565.com-快三每注奖金多少钱| www.085033.com-天天彩票坑吗| www.3104.biz-众发彩票害了多少人| www.43147.com-彩票微信交流群吧| www.867540.com-福彩谜语-| www.125223.com-彩票有哪几种类型| www.271764.com-昨天开福利彩票中奖| www.559019.com-快三选号助手邀请码| www.lm91.com-中彩网…-| www.364.cm-冠胜彩票-| www.947714.com-众彩网知瞳专家预测| www.48vu.com-幸运网彩票-| www.032616.com-篮球彩票网-| www.088306.com-北京单场足彩推荐| www.467867.com-七乐彩开奖直播直播| www.583021.com-彩票追冷还是追热| www.710859.com-新浪篮彩-| www.808768.com-福彩贴吧论坛交流| www.937104.com-福田彩福大厦| www.986261.com-玩彩票刷流水赚钱| www.50794.com-天天爱彩票买不了| www.654051.com-合一彩票登陆页面| www.759917.com-68时时彩计划网| www.841630.com-七乐彩买的人那么少| www.907678.com-威尼斯彩票出款失败| www.970542.com-彩票玄学预测书籍| 500彩票www.338082.com| www.fe24.com-快三第一门户| www.4442.cm-吉林省快三形态走势| www.478360.com-彩票兑软件-| www.570508.com-七彩云南第一城| www.657077.com-时时彩是骗局揭秘| www.731961.com-大发快三是福彩的吗| www.806807.cc-足彩入门教程系列书| www.878351.cc-彩福彩票安全吗| www.948402.com-福彩排列三开奖结果| 豪彩VIPwww.hc2588.com| www.pn7.com-今日多乐彩走势图| www.g11.com-海南私彩评价| www.33ny.com-七星彩第2280期| www.119900.com-河北福彩排5走势图| www.12116.cc-17彩票是不是真的| www.83989.com-彩票别的店给兑奖吗| www.067652.com-时时彩搭建开发| www.147855.com-体育彩票网站| www.669839.com-百博七星彩投注| www.912315.com-体彩中国红中奖率| www.918.red-江苏7位数与7星彩| www.781505.com-时时彩免费计划网址| www.866819.com-周五彩票什么开奖| www.933928.com-今日彩票今开奖结果| 福彩www.86267i.com| www.123503.com-双色球福利彩票中心| www.9568.org-一支黑一支彩| www.061996.com-彩客站主页-| www.34695.com-金彩彩票是骗局| www.804059.com-泉州福建体彩聊天室| www.918747.com-博友彩app苹果| www.996249.com-北单足彩对阵表| www.sy90.cc-体彩6位数-| www.90wi.com-小米8安卓彩蛋| www.4835.xyz-2002世界杯彩票| www.39281.cc-全中彩票1-| www.875444.com-快钱彩票骗局| www.gx46.com-盈彩怎么赚钱| www.853266.com-3d彩票app-| www.331352.com-福彩票3d走势图| www.565649.com-澳门时时彩走势图| www.700512.com-3d彩迷-| 吉利彩票www.66376v.com| www.98309.com-中国体育竞彩比分| www.57sb.com-注册账号玩彩票| www.447994.com-现在微信哪买彩票嘛| www.613686.com-重庆时时彩停吗| www.4039.cc-977彩票当游网| www.6103.cc-彩票庄家不败的原理| www.830779.com-6各彩资料-| www.072704.com-cp彩票苹果版下| www.9032.org-时时彩服务器租用| www.629192.com-5月份彩票销量| www.858005.com-青年文摘彩版手机版| www.5149.com-阿福彩3d北斗| www.585130.com-诺亚5分彩-| www.78936.com-手机彩铃怎么换| www.180573.com-中彩彩票是真的吗| www.q22.cc-山东体彩中心电话| www.1693.vip-极速时时彩群| www.131.xyz-夸女孩子彩虹屁语录| www.101094.com-新华彩票网头条新闻| www.753884.com-6698彩票网站| www.120249.com-久久发彩票ios| www.993328.com-怎么玩彩票挣钱| www.fy42.com-马云买体育彩票| www.qo18.com-必中吉林快三计划| www.950280.com-福彩3d蓝精灵胆码| www.ci4.com-致富彩票快三| www.cp015.com-彩票走势图详解| www.391792.com-体彩微信小程序下单| www.9734.me-体彩刮刮乐兑奖流程| www.115660.com-彩色水磨石地坪价格| www.691583.com-中华彩票公益时报| www.97ek.com-中国福利彩中奖金额| www.00434.com-南方福彩下载| www.397602.com-彩票图纸第一版|