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.20kf.com-茶陵公益彩票| www.866945.com-v8彩票官方网站| www.969564.com-福彩迷快三经验解读| www.579651.com-彩之源怎么下载东西| www.385912.com-精彩音乐汇2015| www.555045.cc-彩票中几个亿| www.671509.com-体彩排三彩宝网| www.143753.com-炫彩壁纸-| www.tt87.com-168快三彩票| www.929289.com-盈彩彩票app安卓| www.065275.com-中国竟彩网手机版| www.181505.com-湖北快三72期| www.258591.com-湖北快三计划| www.05584.com-浙江福彩征召| www.74716.com-竞猜足彩直播| www.949316.com-百盈彩票平台| www.779805.com-祥瑞彩云彩票| www.874259.com-彩票平台程序一条龙| www.954481.com-通博彩票-| 凤凰彩票www.66652n.com| www.868140.com-7星彩和值走势图| www.ct98.com-彩票加盟需要多少钱| www.zv30.com-彩96娱乐-| www.361056.com-下载7k官方彩票网| www.454410.com-网易彩票电脑版官网| www.050419.com-彩票自助机投放规定| www.077921.com-够力七星彩奖表图| www.179884.com-好河南快三开奖结果| www.089646.com-台湾快三计划| www.229132.com-开福利彩票店| www.7020.vip-网上篮球彩票哪儿买| www.501780.com-基诺彩玩法-| www.977744.com-彩色压膜艺术地坪| www.r34.website体育彩票排5| www.003600.com-福彩8app下载| www.561819.com-博彩微信方式送彩金| www.738529.com-加入彩票众筹群| www.877202.com-黑客破解彩犯法吗| www.279623.com-1分时时彩走势| www.432352.com-买彩票花了多少钱了| www.588781.com-关于808福彩| www.749487.com-中彩彩票zc38| www.889193.com-乐彩网3d之佳首页| www.cp318.com-人人彩票网手机版| www.4yq.com-彩乃奈奈百度云在线| www.50253.com-玩彩六点半-| www.69372.com-时时彩快三在线计划| www.301311.com-湖北快三查询结果| www.733916.com-风彩万象-| www.5178.cn-韩国彩票都有哪些| www.50389.com-彩票网站制作源代码| www.128752.com-福彩都有哪些玩法| www.345635.com-福彩双色球复式| www.280806.com-时时彩官方网网址| www.927882.com-高频彩有哪几种| www.18228.cc-体育彩票刮刮乐下载| www.63sb.com-128福彩主页| www.8538.org-大家乐彩票机说明书| www.798974.com-竞彩日职联绝招| www.900381.com-江苏福彩开奖查询| www.966327.com-01彩票吧-| 大赢家彩票网www.83033d.com| www.7237.biz-彩虹画儿童画用彩笔| www.889763.com-7乐彩中6号-| www.996552.com-博瑞彩票主页| www.gu55.com-彩77官网下载安装| www.2819.live-彩票和银行卡| www.018925.com-福彩3d过滤缩水器| www.4697.com-彩38网站是什么| www.433338.com-奔腾彩票平台| www.788058.com-彩宝cb8app-| www.863372.com-体彩19029开奖| www.927203.com-福建休彩31走势图| www.o18.com-玩彩网app-| www.80yq.com-网络彩票倍投的骗局| www.255654.com-生肖彩票叫什么| www.345432.com-大无限捷豹彩票| www.429827.com-日本彩票中奖率高| www.006022.com-私人彩票平台搭建| www.659739.com-600万彩票app| www.762751.com-御彩轩计划手机版| www.851322.com-甘肃快三怎么玩法| www.25048.com-荷花彩铅-| www.578528.com-柒鑫彩票网站安全吗| www.667171.com-英国快三开奖| www.900061.cc-657彩票k-| www.965527.com-江苏快三智能推荐| www.b22.net-福彩排列七奖池滚存| www.33747.cc-彩票买哪种好大奖大| www.8588.date-点点中彩票安全吗| www.43492.com-七星彩开奖表安装| www.38jt.com-彩陶王-| www.682281.com-微信支付投注彩票| www.782885.com-易购彩合法吗| www.go44.com-河南彩礼-| www.u65.com-盈盛现金彩票游戏| www.66744.com-3d彩票兑奖流程| www.304815.com-体彩十一选五预测| www.86319.com-三彩女装正品折扣店| www.44636.com-58购彩网是真的吗| www.522430.com-腾讯分分彩西瓜计划| www.61367.com-家彩搜索-| www.862496.com-福彩双色球怎么玩| www.hh78.cc-49.cc金彩网| www.623.biz-所有彩票网站| www.cai6600.com吉林省的彩票快三| www.779902.com-2019彩票店提成| www.895848.com-快三是福利彩票的吗| www.64nw.com-福彩票三d试机号| www.4272.me-七星彩票现场直播| www.1873.top-易记彩票全天计划| www.11257.cc-中国体彩网四川| www.411228.com-彩票开奖软件app| www.3405.com-500彩注册登录| www.mc66.cc-乐盈彩票跑路| www.18ib.com-天天首充彩票彩金| www.187510.com-重庆时时彩-官方网| www.444049.com-心脏彩超sv正常值| www.895537.com-排三走势图乐彩网| www.803998.com-足彩胜负彩开奖公告| www.595186.com-福彩3d今日双彩图| www.964048.com-彩票分析数据用途| www.66276.cc-福利彩票双色球下注| www.796348.com-尊彩彩票真的吗| www.867744.com-竞彩软件-| www.77041.com-彩票分析软件安卓| www.674684.com-三杯体彩福彩| www.859797.com-306彩票-| www.f81.shop-彩票图表走势图大全| www.345995.com-彩票站前景-| www.576124.com-体彩排列三三码遗漏| www.735296.com-高频彩票合法吗| www.dp78.com-上海快三遗漏数据| www.269489.com-买彩票哪个网站正规| www.327018.com-全国高频彩票| www.937.cn-体彩7星彩开奖直播| www.3532.biz-充值送彩金的大平台| www.763784.com-足球胜负彩app| www.280890.com-彩之家平台可靠吗| www.7375.cm-体彩上市发行| www.31231.com-彩尊安卓版下载| www.cp126.cc-广西快三怎么玩稳赚| www.ki32.com-易彩集团破解器下载| www.99322.com-最新时时彩分析软件| www.160921.com-七星彩早版与加急版| www.85134.com-巨彩娱乐真的假的| www.35989.com-炫乐彩票怎么样| www.823550.com-彩涂钢板工艺| www.921844.com-五分时时彩免费计划| www.2776.com-河北福彩开奖7乐彩| www.cf15.com-福彩3d合买计划| www.8275.top-南昌福利彩归那里管| www.906395.com-彩票平台大全送彩金| www.108981.com-欧洲百万彩开奖号码| www.if38.com-快乐彩视频-| www.153707.com-福彩2d-| www.846848.com-亚博体育假彩票充值| www.0592.site-中奖后彩票店老板| www.828997.com-永信彩票app下载| www.0490.xyz-360彩票代购大厅| www.701596.com-足彩胜平负投注| www.x72.shop-彩票投注网站有哪些| www.232573.com-新浪彩票竞技风暴| www.273.tv-七星彩16106|