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.515929.com-足彩跟单连黑怎么办| www.225012.com-福彩幸运快三邦投| www.979958.com-彩票吃票行为| www.gs4.com-体彩481走势图| www.233180.com-体育彩票今日开奖| www.ch06.com-快三赔投方法| www.5507.vip-彩票站点缴费| www.398345.com-彩软软件-| 天天彩票www.106326.com| www.082748.com-网络快三能玩吗| www.233706.com-快三开对子的概率| www.363.org-排列3双彩论坛| www.4540.cc-七星彩近2000期| www.02351.com-乐彩3d折线图| www.012357.com-一定牛彩票网首页| www.524062.com-时时彩今天咋没开奖| www.618844.com-新浪彩票pc版| www.699805.com-彩票看号技巧| www.786708.com-体彩超纱大乐透开奖| www.906531.com-分分时时彩万位技巧| www.972419.com-娘娘彩铅画-| www.cai4094.com福彩双色球开奖号码| www.309211.com-彩票被骗-| www.399566.com-快三长牌-| www.ne11.com-105彩票安卓版| www.949499.com-购彩票助手-| 500彩票网www.55220.com| www.0807.wang-大发快三倍投计划图| www.34wc.com-中国体彩七星彩历史| www.363941.com-彩虹光男头像图片| www.504114.com-重庆时时彩全天计划| www.38318.cc-内蒙时彩开奖| www.055476.com-66好彩app-| www.26268.cc-广东福利彩票| www.028970.com-神州彩票官网| www.140102.com-狗州app足彩| www.250225.com-云购彩-| www.335518.com-北京体彩网官网| www.115206.com-彩铅画山水画| www.46ma.com-怎么申请开体彩店| www.838.top-赢彩彩票玩的人多吗| www.244256.com-海南体彩下载| www.365139.com-专业彩票走势图| www.497879.com-44557鸿运彩票| www.570057.com-3分彩全天计划| www.650096.com-开机号中华彩票网| www.716088.com-大发彩票可信吗| www.795596.com-共享彩票app官网| www.kj38.com-彩票小助手计划软件| www.261703.com-竞彩让球-| www.949340.com-福彩快三第一门户网| 好彩www.60123z.com| www.803976.com-微信好友拉着买彩票| www.780878.com-杏彩彩票骗局| www.872295.com-乐彩网下载安装| www.956216.com-玩彩票有赢钱的吗| 500彩票www.330872.com| www.2397.wang-好彩自然来上一句| www.239038.com-5亿彩是骗局吗| www.371182.com-彩铅樱花树画法图片| www.852239.com-足球竞彩推荐网易| www.916771.com-信阳合买彩票中奖| www.972095.com-19049足彩大势| 通盈彩票www.567388.com| www.146966.com-即乐彩福建体彩网| www.jz96.com-彩票2元专业| www.265635.com-吉林快三出号| www.127436.com-日彩网合法吗| www.210101.com-快三正规app下载| www.322882.com-北京快三个位走势图| www.4594.in-福利彩票佣金网页| www.87fm.com-小白彩票新版| www.908985.com-我的账户彩票| www.366354.com-福利彩票33期色| www.144757.com-竞足唯彩会-| www.253041.cc-山东好彩快三走势图| www.466861.com-彩票打票截止几点| www.36690.cc-澳门有彩票吗| www.333626.com-体彩彩票怎么看| www.43258.com-久久炫彩彩票| www.091255.com-海南省七星彩规律图| www.326563.com-安然七星彩专家总汇| www.434813.com-鸿鼎彩票软件下载| www.575133.com-福彩快3倍投大小| www.165705.com-青岛福彩中奖信息| www.320752.com-百宝彩视用户名密码| www.258677.com-足球比赛竞彩网| www.336918.com-红中彩票手机版登录| www.j08.net-糖果派对彩金中奖图| www.47fu.com-三分彩走势-| www.0151.pw-北京福彩中奖号码| www.071763.com-秒速快三交流| www.004997.com-查一下彩票中奖| www.997166.cc-11选五北京爱彩乐| www.205712.com-如何看懂快三走势| www.95627.com-体彩公益金申请| www.547599.com-十大彩票巨奖骗局| www.265905.com-快乐双彩走势图| www.18pk.com-七乐彩几点公布| www.94bc.com-彩晶项链-| www.dy2.com-百盈快三是真的假的| www.244265.com-快三神奇四码| www.963043.com-彩色混凝土地面报价| www.cc07.com-爱彩乐六个肖彩票网| www.163629.com-篮彩让分竞彩| www.27600.com-彩票自动跟投软件| www.810234.com-有没有稳赢的彩票| www.900259.com-爱彩乐专家荐号| www.ap56.com-遵义福彩兑奖中心| www.29bh.com-万彩彩票是正规吗| www.300108.com-彩宝网站-| www.065122.com-彩虹玫瑰图片| www.242.cm-时时彩一星做号技巧| www.713745.com-国彩是骗局吗| www.66wu.com-杏耀彩票下载| www.592358.com-90304期体彩| www.739465.com-江苏江苏福利彩票| www.kl46.com-王牌彩票是违法的吗| www.712576.com-七乐彩推荐号汇总| www.pf2.cc-哪个彩票软件最好| www.pn03.com-彩票选号规则| www.28mj.com-艾彩调教社区| www.90or.com-福彩中奖怎么看| www.257051.com-中国福彩快三新规| www.59797.cc-网上买彩票输了| www.203222.com-福利彩票任三技巧| www.948758.com-万彩万彩吧-| 爱彩乐www.www.ac9911.com| www.385103.com-体彩跨市兑奖| www.890730.com-腾讯官网竞彩足球| www.959055.com-3d新彩网藏机图| www.344346.com-重庆时时彩杀码软件| www.315835.com-彩虹7号电池| www.ro61.com-福彩今出号-| www.752906.com-重庆福彩手机版| www.610115.com-彩票快三合法吗| www.654239.com-福彩时时彩开奖号码| www.3795.com-体彩大乐透复式玩法| www.287876.com-华夏彩票官网下载| www.374188.com-福彩3d精准杀路数| www.487088.com-高频彩一晚赢4万| www.365227.cc-彩库宝官方下载| www.0349.wang-彩票可以研究出来吗| www.u62.com-彩票中巨奖的人是谁| www.139128.com-共享彩票机招商| www.994865.com-重庆实时彩开奖视频| www.kk25.com-玩彩心得-| www.e36.cc-印尼三分彩开奖号码| www.39pr.com-七星彩内部信息| www.0839.tv-足彩还能网上买吗| www.68812.com-乐彩网福彩三d首页| www.327307.com-新浪体育彩票关注| www.390040.com-重庆福彩中心主任| www.560809.com-彩运宝是正规的吗| www.621722.com-竞彩足球258彩票| www.24786.com-彩铅梦幻鹿-| www.314924.com-双色球彩票规则| www.456887.com-vr时时彩对接| www.287289.com-五分彩怎么玩| www.661649.com-竞彩8串一中奖率| www.171071.com-贵州福彩中心| www.398615.com-足彩12月份对阵表| www.6644.me-双色球彩民村走势图| www.31653.cc-彩票套利平台|