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.3642.org-双色球购买新浪爱彩| www.142135.com-福利彩票怎么玩儿| 福彩www.86267f.com| www.oy93.com-宁夏福彩中心地址| www.274687.com-玩脑者分分彩| www.551216.com-福州彩票app制作| www.695738.com-福彩走是图-| www.679520.com-搜狗彩票走势图| www.1718.top-买世界杯彩票网站| www.fw63.com-福彩打法技巧大全| www.c13.net-彩票软件下载官方| www.055320.com-吉林快三网络盘代理| www.860375.com-统一彩票真的假的| www.785617.com-牛娃彩票图库| www.058229.com-五分快三彩票平台| www.9781.vip-周六有哪些彩票开奖| www.64083.com-博友彩用户注册| www.790989.com-彩宝网双色球开机号| www.200018.cc-1分快三计划今天| www.074719.com-皇家彩博应用| www.075055.com-福彩销售额下降了吗| www.557448.com-简单水彩画教程花| www.38395.cc-天天爰彩彩票| www.007533.com-河南省体彩中心加盟| www.646579.com-芸彩数字八星口诀| www.856660.com-七星彩开奖结果记录| www.957425.com-海口七星彩大师| www.uh.cc-福彩票开奖查询结果| www.145605.com-神圣团队福彩| www.024972.com-福利彩票模拟摇号| www.353107.com-京彩集团注册| www.49vr.com-竞彩足球官方下载| www.2866.xyz-分分彩龙虎玩法| www.298003.com-快三分布图片| www.236121.com-50o万彩票网| www.872542.com-下载山西体育彩票| www.xl48.com-甘肃福彩中心怎么走| www.553365.com-上海3d彩票-| www.46ni.com-246好彩免费资料| www.1356.com-vr彩票走势图| www.437714.com-江苏省爱彩乐十一选| www.va61.com-彩投彩票手机投注站| www.574290.cc-牛人彩票app| www.70357.com-大钱庄彩票合法吗| www.716121.com-体彩天下网址下载| www.177762.com-分分快三技巧和值| www.815997.com-福彩3d系列三| www.927990.com-二分快三在线计划| www.997378.com-全天极速时时彩计划| www.es72.com-中彩网快三下载安装| www.wy94.com-精彩十分图-| www.960843.com-天下彩g49·cc| www.rj0.com-福彩快三神器| www.644589.com-青岛体彩电话| www.60339.com-黑彩票平台曝光| www.200555.cc-123彩票-| www.84777.com-聚彩彩票是骗人的吗| www.yv61.com-中彩免费资料大全| www.47213.com-彩礼三金是什么| www.812096.com-古林快三开奖| www.983706.com-快三到几点-| www.ql70.com-博牛彩票登录| www.67om.com-体彩泰安投注站| www.715988.com-福彩3d直选号推荐| www.633901.com-91彩票网-| www.208552.com-彩票专业术语有哪些| www.301140.com-彩鸿彩票不能提现| www.389230.com-重庆时彩合法吗| www.39118.com-强强彩票软件手机版| www.80fn.com-凤凰彩平台是真的吗| www.396810.com-金钱豹彩票投注网站| www.520616.com-快3彩票限号| www.586262.com-彩播app有病毒吗| www.652632.com-电子竞技博彩软件| www.4094.biz-彩虹无人机千亿市值| www.78266.cc-湖南快三开奖查询| www.5800.vip-福彩扑克牌玩法| www.469133.com-被r8彩票骗了| www.571512.com-湖北快三杀号号技巧| www.686076.com-全民福利彩票下载| www.787972.com-陆慧明足彩今日任九| www.63xe.com-全民赢彩票压熊猫| www.609860.com-想买彩票怎么买| www.765525.com-乐盈彩票实力铸就| www.954981.com-彩票怎么买稳赢| www.sc58.com-我想玩吉林快三谁有| www.1112.me-足彩五串一错一场| www.8604.me-陈翔六点半中彩票| www.753489.com-彩票12是什么| www.853889.com-亚博竞彩下载| www.939138.com-cp599彩票-| www.997152.com-福利彩票假的嘛| www.cy29.com-江苏快三下载| www.527965.com-飞来福彩吧靠谱吗| www.464318.com-风飞扬七星彩预测| www.552002.com-星期一彩票开什么奖| www.200698.com-福利彩票昨晚开奖| www.577.red-竞彩网足球360| www.816409.com-中彩票最多的人| www.939333.com-北京单场足彩推荐| www.993698.com-希腊十分彩下载安装| www.al55.com-福彩了d图迷总汇| www.qf70.com-全民足彩app下载| www.201981.com-彩71彩票可信吗| www.555254.com-香港人博彩论坛| www.623957.com-乐彩彩票下载苹果| www.702006.com-杭州竞彩app开发| www.766256.com-湖北体彩快三| www.834402.com-日本软红好彩| www.888752.com-78彩票下载安装| www.947298.com-小崔说彩票-| www.984272.com-彩八官方网站| www.cp410.cc-河北快三奖金规则| www.538901.cc-必赢快3彩票| www.621338.com-红旗彩app下载| www.681568.com-豪彩彩票-| www.756612.com-全民中彩下载| www.828138.cc-胜负彩一等奖怎么领| www.893859.com-斗牛彩票注册| www.01la.com-梦兆七星彩图册| www.785048.com-七星彩号码预测推荐| www.868717.com-七星彩第三位杀号| www.940789.com-中福时时彩预测| www.992554.com-万家彩票网正规吗| www.oz8.com-买彩票的最佳时间| www.oh67.com-彩猫app-| www.479633.com-安远中彩票-| www.972413.com-多肉彩铅画教程| www.cp574.com-可靠凤凰的私彩平台| www.vn45.com-湖北快三缩水| www.3897.wang-竞彩足球单场| www.097273.com-香港福彩3d资料图| www.490943.com-腾讯十分彩开奖| www.589318.com-南国彩票精彩论坛规| www.675012.com-浙江福彩快5| www.752760.com-彩票如何刷流水| www.910928.com-福彩快三为何改时间| www.ng2.com-825彩票-| www.55xz.cc-福彩能在线购买吗| www.205996.com-十大黑彩平台排名| www.840830.com-彩妆美甲加盟店欧泉| www.937147.com-乐福彩票下载| www.61kd.com-中国福彩3d八卦图| www.7010.in-中国篮球彩票怎么买| www.703058.com-今天的福彩开奖号码| www.777577.cc-合买大厅彩票源码| www.845017.com-福彩历史大奖组时期| www.900364.com-粤淘彩票主页| www.960109.com-彩票送不送彩金| 福彩www.2109g.com| www.88492.com-彩票616app-| www.528287.com-河内时时彩软件| www.299372.com-买时时彩的技巧| 39彩票www.3933s.cc| www.81uw.com-福彩大地主杀组合| www.2876.cn-内蒙古快三新玩法| www.8118.pro-葡京彩票是什么骗局| www.26899.cc-七星彩规则| www.65415.com-西宁福彩双色球字迷| www.98927.com-重庆时时彩跨度介绍| www.053931.com-竞彩世界杯-| www.136859.com-彩788靠谱吗| www.198207.com-七星彩开奖结果查询| www.257319.com-微彩下载安装到手机|