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.396646.com-58彩58开奖记录| www.53do.com-彩票行家免费资料| www.1816.shop-天天爱彩票软件下载| www.798765.com-盛世彩票线路1| www.943014.com-易赢彩票app| 彩票宝www.5cpb.com| www.lu73.com-玩快三会被抓么| www.807177.com-中华彩票网骗局| www.237562.com-云发购快三-| www.at22.com-广东福彩快3怎么玩| www.qx70.com-生肖彩开奖-| www.41wk.com-足彩竞猜投注258| www.0657.vip-胜负彩新浪购彩大厅| www.7520.com-体育竞彩店前期投资| www.3999.date-公海娱乐博彩| www.900887.com-3d小小鱼版彩吧图| www.91ep.com-好彩频道怎么看| www.089464.com-快三是官方的吗| www.227004.com-彩铅画图片大全人物| www.397574.com-体育彩票春节安排| www.565897.com-体彩481规律| www.696895.com-乐迷炫彩下载| www.796877.com-彩票77网址是多少| www.900078.cc-逍遥宫彩票平台下载| www.1bv.com-彩票质合组合图表| www.2511.cc-86人工彩票网| www.723621.com-常州彩票-| www.41432.com-彩票谜语大全| www.6464.red-天空彩报码开奖结果| www.927963.com-高频彩哪种追号好| www.830511.com-看彩票的软件| www.921078.com-足球胜负彩开奖查询| www.989328.com-彩店818怎么下载| www.et25.com-旺彩娱乐-| www.233281.com-海南东方快三开奖| www.109329.com-玩彩彩票安卓app| www.209699.com-黑彩代理怎么拉客户| www.549409.com-网上足彩购买方法| www.28954.com-怎样买3d彩票| www.116959.com-河北福彩快乐3历史| www.11ql.com-西安天彩粮骗局休假| www.5212.org-派彩负数是什么意思| www.326285.com-彩云追星-| www.bg5.cc-福彩快乐十分走势图| www.5810.vip-竞彩4场3关4关| www.10741.com-足彩19045推荐| www.298997.com-彩票最新开奖查询| www.229.in-爱购彩进不去| www.006824.com-安徽体育彩票网| www.367829.com-彩13团队-| www.735555.com-吉祥彩票0500| www.099721.com-大彩鲸十一选五助手| www.453451.com-竞彩软件有哪些| www.23kk.com-体彩hao123-| www.23xu.com-83期彩票开奖查询| www.560047.com-彩票真的有规律吗| www.644463.com-数学家研究彩票| www.762103.com-合肥十一选五爱乐彩| www.865383.com-体彩手机在线可靠吗| www.cai3232.com快三中2个号多少钱| www.82877.cc-大奖彩票机子能兑| www.477474.com-3d福彩排例五| www.296788.com-彩票开奖网站| www.321860.com-彩票规律神器| www.192001.com-河南快三跨度表| www.pb05.com-福彩3d预测今天| www.807198.com-温州福利彩票转让| www.cai0277.com中国福彩快3兑奖| www.7263.in-彩虹4无人机发动机| www.740027.com-澳彩水位划分| www.64768.com-竞彩害人-| www.677163.com-掌上福彩宝典害人| www.951464.com-聚鑫网彩票真提现钱| www.og78.com-卓易彩票旧版| www.4111.vip-七星彩票手机苹果| www.659417.com-动力体彩开奖| www.978329.com-混凝土可以做成彩色| www.22du.cc-吉祥彩票怎么样| www.360842.cc-福彩幸运星座| www.78501.com-新昌双彩乡-| www.02cu.com-济南山东福彩| www.660402.com-山东齐鲁彩票欢迎您| www.752477.com-腾讯分分彩挂机骗人| 500万彩票www.75wcp.com| www.mt47.com-彩票app购买| www.386128.com-hα0123彩票| www.26248.com-彩虹的词句-| www.00ne.com-易赢彩票网-| www.0055.loan-香港马会时时彩骗局| www.23579.com-大赢家彩票开奖结果| www.660420.com-齐鲁七乐彩开奖号码| www.938615.com-福彩快三必中的方法| www.cai2199.com快三如何玩-| www.818304.com-新浪网彩票预测| www.894416.com-彩票助赢手机版图标| www.975113.com-快三计划套路| www.cp5385.com-甘肃快三开奖结果快| www.234.cn-希腊10分钟彩票| www.225476.com-加微信代玩彩票骗局| www.750025.com-吉林快三算号| www.931569.com-澳客彩票网彩客网| www.680637.com-35彩票平台合法吗| www.751948.com-亚洲彩票网投| www.830305.com-福彩8676-| www.028394.com-博彩彩票站-| www.878267.com-网投彩票哪个最安全| www.699428.com-七乐彩开奖三等奖| www.2699.top-时时彩网贴吧| www.8905.love-福彩历史返奖率| www.954719.com-排三走势图彩宝网| www.97528.cc-福利彩票123等奖| www.879099.com-甘肃快三预测神器| www.479505.com-山西体彩官方网站| www.563693.com-大中华彩票官网下载| www.657998.com-创彩电视-| www.04tf.com-自学彩铅画教程| www.75062.com-中囝体育彩票大乐透| www.pd25.com-彩票入门与技巧| www.110052.com-台湾乐透彩开奖直播| www.18965.cc-彩票网站容易入侵吗| www.68140.com-体育竞技彩票倍投| www.21391.cc-创名彩票是真的吗| www.zl77.com-乐彩双色球字谜图谜| www.94bu.com-香港正版彩图| www.502879.com-口袋彩店无法下单| www.239348.com-广东快三自己控制| www.315813.com-爱彩乐时时彩走势图| www.055133.com-彩色的梦教案| www.61594.com-小米彩票登录| www.727258.com-正规香港赛马会彩票| www.32ym.com-红旗彩票官方首页| www.62362.com-花样快三套路教学| www.75581.cc-彩票怎么倍投| www.071543.com-天天彩票骰子| www.13498.com-555彩票-| www.006872.com-湖北福彩快三在线| www.266265.com-三分快三开奖记录| www.378527.com-微信七星彩群| www.505950.com-86彩票app-| www.81866.com-968彩票网-| www.29nd.com-卡通彩铅画女孩| www.925.name-临沂中彩票-| www.414228.com-什么是博彩-| www.723756.com-博乐彩平台下载| www.846878.com-足彩交易量最准的| www.908163.com-六安福彩中心| www.982042.com-南充体彩兑奖处| www.hi.com-亚洲彩票可以赚钱吗| www.835484.com-好彩1规则-| www.024704.com-竞彩双平怎么打| www.126086.com-幸福彩彩票下载| www.657655.com-女子彩票中51亿| www.ub99.cc-买4张彩票中5亿| www.00nx.com-一年级彩虹教案| www.104677.com-足彩竞彩直播| www.19236.com-彩票图片能兑奖吗| www.211080.com-彩票网站注册| www.501511.com-易玩彩票-| www.543566.com-福彩大老头-| www.xw65.com-彩票只能去店里买吗| www.917368.com-私彩平台代理大客户| www.986926.com-彩先知网站-| www.cp6553.com-e球彩-| www.67630.com-斯诺克博彩app|