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天

知道了
1分快三 www.962424.com-清查福彩3d开奖号| www.669498.com-彩钢夹芯板岗亭| www.93811.cc-福彩三d几点开奖| www.744487.com-7彩网官网-| www.906693.com-一分福彩3d-| 爱彩乐www.692918.com| www.64lc.com-体彩刮刮大7彩票| www.95015.com-刷福彩流水可靠吗| www.447599.com-足彩中奖概率是多少| www.576511.com-快三不出一跨| www.016372.com-彩票k线图卖点| www.365369.cc-中国本彩大乐透| www.512124.com-彩铅幼儿画图片大全| www.75le.com-七乐彩25号开奖| www.576675.com-内蒙古快三号码图| www.229977.com-百盈彩票计划| www.738675.com-彩网吧-| 众彩www.548116.com| www.xj49.com-看看彩票开奖查询| www.35oz.com-新浪乐彩怎么下载| www.115483.com-澳客彩票哪里能下载| www.347641.com-天天彩票软件贴吧| www.385995.com-天津福彩中心办公| www.699249.com-内蒙快三出啥号| www.129317.com-腾讯分分彩破解高手| www.222146.com-福彩3d开什么号| www.963670.com-足彩二串一复式| www.cp5699.com-彩票坊一分快3| www.768969.com-好彩捕鱼-| www.899134.com-310足彩报-| www.985224.com-快乐彩破解-| www.je90.com-宝马彩票送38| www.f16.cn-快三怎样选号| www.40rr.com-香港福利基金彩地址| www.185062.com-彩9官方下载| www.550853.com-凤凰彩票导航网| www.420092.com-乐游彩票能赚钱吗| www.4598.xyz-电竞体彩-| www.137635.com-创富彩票是真的吗| www.389944.com-快三进群带玩| www.586713.com-福彩动物彩票开奖| www.775508.com-福彩快3速查表图片| www.945818.com-体彩大7中奖图片| www.bl63.com-利彩下载安装| www.6pm.cc-年终奖彩票-| www.pq58.com-中国福彩手机购买| www.ab61.com-上海快三冷号遗漏期| www.se22.com-重庆时时彩下载版| www.08ot.com-福建彩票摇奖机| www.91kd.cc-购买辉煌彩票犯法吗| www.vk02.com-彩票三d-| www.746886.com-bg彩票-| www.852325.com-波叔竞彩推荐| www.963326.com-彩铅樱花树-| www.dc22.com-全民快三彩票| www.985400.com-金山彩票最新版本| www.fn66.com-彩票136期-| www.222919.com-买彩票下载-| www.325244.com-彩票中奖规则图片| www.bw66.cc-爱彩乐网站-| www.a22.vip-体彩图标图片| www.981948.com-贵阳体彩大奖| www.020714.com-福彩布衣天下i| www.27958.com-快三属于违法么| www.953040.com-彩票官方app| www.cl06.com-北京快三走遗漏| www.05ze.com-五彩斑斓黑的下一句| www.411.cx-史上彩票最大奖| www.21252.cc-时时彩5星定位胆| www.387156.com-手机彩膜图片原图| www.501555.com-周易怎么测彩票| www.ak00.com-全员彩票开奖查询| www.614752.com-卖彩票的地方| www.706718.com-5分时时彩开奖号码| www.016012.com-彩票开奖公告app| www.4384.cm-2016年福彩和值| www.16058.com-河北快三和值表图| www.825957.com-彩王争霸平台| www.553404.com-邯郸彩票有人中奖| www.054499.com-众赢彩票是骗局吗| www.015913.com-鸿运彩票网是正规| www.155802.com-3d彩票平台有哪些| www.89653.com-三分幸运快三技巧| www.980052.com-体彩形象店-| www.rt48.com-乐彩网首页彩| www.32an.com-昨儿彩票出的什么| www.552.win-7乐彩今晚开奖结果| www.3652.pw-天福彩票网址| www.298028.com-时时彩大小计划免费| www.298827.com-cm彩迷-| www.373880.com-365彩票不能提现| www.503987.com-百世彩票网站| www.541355.com-济南彩箱厂-| www.677950.com-金彩网高手网| www.923342.com-彩票实体店未来趋势| www.cp5020.com-北京体彩-| www.976563.com-彩票代理返点是什么| www.bd1.com-新浪彩票-| www.sm31.com-江苏e球彩总进球数| www.231838.com-江苏快三二期计划| www.382036.com-精彩点击-| www.413141.com-五分彩真的能赚钱吗| www.731027.com-全国开奖新浪爱彩| www.843475.com-山东体育彩票客服| www.436985.com-瑞士彩票最高奖金| www.163970.com-时时彩五星独胆诀窍| www.cp407.com-甘肃快三的预测号码| www.702528.com-做竞彩怎么拉人| www.811022.com-福利彩票3d彩报| www.896751.com-彩票投注软件怎么做| www.979236.com-好彩混合型-| www.cp7211.com-快三人为控制| www.pa83.com-高频彩票调整| www.618272.com-福彩3d072字谜| www.711610.com-t5584彩票-| www.789596.com-快三试机号今天| www.851177.com-彩票彩票-| www.75yl.com-玩彩乐广西一定牛| www.317508.com-数字彩的另类打法| www.396124.com-聚星彩票下载安装| www.408473.com-足彩比分爱彩| www.684515.com-华彩网是不是骗人的| www.507071.com-竞彩猫可以赚钱吗| www.127506.com-彩虹网-| www.95921.com-福彩考试资料大全| www.132441.com-彩票截止时间是几点| www.664449.com-七乐彩计算表| www.1972.xyz-58彩票预测-| www.9958.in-体彩专管员工资待遇| www.35vq.com-什么是希腊5分彩| www.764442.com-彩吧论坛胆码予测| www.861692.com-赢彩3d开机号| www.966447.com-体彩附近网点查询| www.mb62.com-好运彩快三下载| www.13rs.com-山东彩票手机投注版| www.511.in-保定福彩站-| www.207611.com-必中快三计划全能版| www.920172.com-3d彩票走势图大全| 彩票坊www.988917.com| www.017184.com-吉林市彩票站出兑| www.o80.com-七星彩多少钱一张| www.13bf.com-北仑体育彩票大奖| www.86002.cc-安徽福利彩票3d| www.687205.com-我附近的体彩投注站| www.777135.com-友宝彩票-| www.865625.com-彩票站加盟多少钱| www.180072.com-江苏快三彩票网站| www.704331.com-彩票黑平台查询| www.788531.com-七星彩十专家预测号| www.882547.com-高频彩正规吗| www.950947.com-体育彩票足球| www.997874.com-乐彩走势图大全| www.vw36.com-v8彩票苹果版| www.342543.com-天彩粮可信吗| www.9802.vip-体彩任九规则| www.51507.com-福彩4d选4玩法| www.637150.com-彩虹台网络在线直播| www.672698.com-玩体彩外围犯法吗| www.815994.com-3d彩报布衣电子报| www.896954.com-快樂双彩-| www.eg77.com-湖北快三豹子走势图| www.n55.pw-体彩怎么买容易中奖| www.67826.com-公务员买彩票犯法吗| www.163419.com-国彩app官方下载|