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.9661.vip-万彩官网-| www.135512.com-福彩网站下载安装| www.401077.com-苏全文七星彩预测| www.623138.com-红牛福彩-| www.oq33.com-珍贵彩票-| www.ux86.com-北京市快三-| www.6244.vip-01彩票欢迎你| www.259657.com-快三计划免费软件| www.515617.com-彩票亏钱了怎么追回| www.871489.com-分分快三预测三不同| www.2168.me-福彩8码组六| www.079342.com-三分快三最高多少倍| www.362524.com-美丽的彩虹-| www.632424.com-福彩中奖多久到账| www.873843.com-黔东南体育彩票中心| www.cp5338.com-北京快三的开奖结果| www.77bu.com-银川市彩票中心| www.6626.net-体彩能买nba吗| www.359615.com-体育彩票所有玩法| www.387404.com-手机彩边怎么设置| www.l89.cn-彩票综合走势图大全| www.658625.com-手机怎么买彩票安全| C9999www.318548.com| www.328330.com-电子游艺平台送彩金| www.468860.com-高频彩票记录| www.766651.com-贵阳彩票中奖| www.za53.com-彩票三d试机号今晚| www.84543.com-中国彩钢板厂家排名| www.490389.com-旺彩游戏平台注册| www.651926.com-吉林快三作弊软件| www.888752.com-78彩票下载安装| www.3778.cm-新浪足彩中奖查询| www.92989.com-什么是快3彩| www.181329.cc-3快三走势图青海| www.341335.com-微信快三稳定群| www.123011.com-彩虹计划真的假的| www.9006.cc-ha0手机彩票| www.115606.com-彩票店加盟的好处| www.749733.com-306新版彩票| www.089468.com-刷彩票单是什么| www.266610.com-一分钟快三开奖官网| www.529271.com-彩虹糖的梦歌词| www.868527.com-七星彩开机号| www.cai248.com-一分快三开奖号码| www.34ce.com-彩之源印刷有限公司| www.6nm.com-数学家买彩票厉害吗| www.yc34.com-体育彩票店几点开门| www.957.net-500彩票网试玩| www.73ms.com-体育彩票预测专家| www.15mr.com-七乐彩杀号定胆2| www.707976.com-易彩堂提现-| www.840883.com-彩票中奖到哪里领| www.956844.com-金利彩票假吗| www.gm11.com-福彩网055dcc| www.79si.com-3d福彩三毛预测| www.8108.top-双色球彩票开奖日| www.9916.top-网上彩票app靠谱| www.91805.com-广东彩王2o18| www.135105.com-二十六天好彩| www.314399.com-体彩足球彩票怎么看| www.596573.com-快彩网平台怎么样| www.3pl.com-即开型彩票售卖机| www.543238.com-nncny牛彩纽约| www.565087.com-福彩3d杀号袁紫光| www.19ph.com-泰安二手体彩| www.3555.date-彩83.net-| www.021094.com-新浪分分彩-| www.984481.com-彩8彩票是正规的吗| www.xd14.com-南国七星彩规律图| www.479.cm-时时彩任二技巧| www.332024.com-福彩十选五骗局| www.58bt.cc-百宝电子走是图彩票| www.991437.com-七星彩在哪里买| www.947169.com-快三二不同指什么号| www.cp6110.com-福利彩票软件下载| www.487755.com-分分彩走势图软件| www.75718.com-晚晚好彩公众号| www.218342.com-大奖快三官网| www.188068.com-安徽快三推荐一定牛| www.301341.com-玩彩票骗局-| www.108760.com-今晚七星彩开奖信息| www.242607.com-168彩票网可靠吗| www.331513.com-七乐彩票平台| www.404136.com-7星彩兑奖查询| www.537093.com-五洲彩票如何登录| www.668072.com-福利彩票中心窝案| www.739421.com-彩票之家999| www.815033.com-彩票玩法技巧绝招| www.350.cm-体彩中心地址| www.56310.com-山东福利彩票手机端| www.98972.com-许昌鄢陵彩礼多少| www.869386.com-够力七星彩规律图| www.980725.com-开福彩店流程及利润| www.gg2.com-幸运快三计划网| www.gv24.com-河南体彩481直播| www.089754.com-天津体育彩票怎么玩| www.149470.com-5分快三赚钱的方法| www.lk56.com-彩店宝彩票app| www.385582.com-彩票平台负盈利代理| www.817510.com-福彩30期开奖号码| www.22520.com-天天彩票官网下载| www.764799.com-好用彩票app排名| www.908218.com-合肥齐豪快三走势图| www.979391.com-收贵州快三查询| 500彩票www.937986.com| www.186009.com-北京时时彩开奖结果| www.551854.com-彩票长龙统计网| www.631617.com-老时时彩软件| www.731235.com-易彩集团网站| www.815544.com-哪个台能看体彩直播| www.895432.com-新粤彩100网| www.970996.com-光头强买彩票69期| www.cp3356.com-官网一分快三| www.71zh.com-彩票就没有规律| www.138988.com-上海彩票集中投注| www.234896.com-彩票中奖新闻| www.316990.com-彩票上税多少| www.376761.com-七星彩下载哪个软件| www.474970.com-青海福彩三d开奖号| www.558164.com-彩铅插图动物| www.629613.com-幸运彩票在线客服| www.705858.com-谁有发彩网邀请码| www.778401.com-揭密时时彩合买大厅| www.847623.com-138彩-| www.928209.com-算局画规七星彩奖表| www.cp5566.com-贵州快三的开奖结果| www.rl63.com-p幸运快三代玩| www.34ks.com-七星彩开奖会从开吗| www.9955.cc-天天彩票官网购买| www.260894.com-竞彩足球任选九| www.404838.com-儿童彩铅风景画简单| www.760.in-百乐彩1001-| www.5806.cm-竞彩篮球三串三| www.19018.com-体彩彩票领奖流程| www.229067.com-梦想彩票站用户登录| www.341654.com-东北快三微信群| www.509313.com-时时彩守号-| www.629474.cc-福彩26选5的奖池| www.752127.com-中彩彩票客服| www.829508.com-彩聊app-| www.954624.com-国外彩票有哪些| 网易彩票www.552432.com| www.400429.com-116彩票下载安装| www.9461.cc-福龙彩票网站| www.151577.com-福彩藏机图谜总汇| www.790103.com-青海省体彩中心地址| www.7336.cc-双彩论坛网首页| www.599036.com-第一次买彩票| www.666433.com-江苏快3乐彩站| www.593100.com-哪个彩票平台可靠| www.183666.cc-彩票中奖规则| www.675973.com-北京聘礼彩礼怎么给| www.988669.com-期期中彩票ios| www.ai56.com-福利彩票啥时间开奖| www.uq39.com-杏彩线路测速| www.869823.com-老版唯彩会-| www.063777.com-私彩平台那么多| www.389930.com-18123期体彩| www.984000.cc-518彩票网app| www.bg70.com-快乐彩五行稳赢| www.172523.com-什么是快三彩票| www.282920.com-上彩票app下载| www.379715.com-夫妻俩幻想中彩票| www.558335.com-奥客竞彩足球直播吧|