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.397183.com-红旗彩票首页注册| www.qy46.com-有人玩极速时时彩吗| www.23mv.com-时时彩龙虎走势图| www.670198.com-风采风彩区别| www.747119.com-彩票注册送彩金19| 大赢家彩票平台www.689613.com| www.73326.com-大众彩票官网| www.120216.com-澳门五分彩怎么样| www.863740.com-腾讯3d彩票开奖| 网易彩票www.073wy.com| www.127493.com-彩宝贝网免费预测| www.g06.com-彩票怎么买法| www.760830.com-珐琅彩瓷器-| www.926322.com-福彩点怎么申请办理| www.75kc.com-足彩独赢是什么意思| www.52869.com-好彩无烟嘴在哪买| www.818620.com-海南七星彩头尾图规| www.953341.com-竞彩预测推荐| www.cp8618.com-上海福彩4d开奖| www.ot83.com-双彩论坛i-| www.126317.cc-手机版下载8号彩票| www.q05.site-广西快三大小计划| www.71id.com-下重庆7时彩| www.86165.cc-新粤彩闲情好彩8版| www.871930.com-毕节市福利彩票中心| www.215891.com-福彩网是真的假的| www.319996.com-排列五走势图彩贝网| www.246900.com-乐米彩票官网| www.492406.com-广西体彩站电话| www.710658.com-最值收藏彩票| www.av02.com-官方一分彩票| www.02fg.com-e球彩官网-| www.839382.com-七乐彩杀号技巧| www.4ps.com-苏州糖豆信息彩票| www.6169.vip-皇家彩彩票人工计划| www.r08.cc-附近体彩-| www.81ep.com-时彩族在线计划| www.33bq.com-排列三字谜凤彩网| www.829494.com-彩聊软件怎么下载| www.030255.com-好运来彩票软件| www.585730.com-彩票一元购注册送钱| www.681621.com-福利彩票二等奖规则| www.844150.com-福彩与慈善工作结合| www.955527.com-彩票店如何刷销量| www.cai7789.com快三北京开奖走势图| www.pj57.com-新浪彩票竞技| www.092629.com-安徽彩礼价格表| www.020614.com-时时彩免费源码| www.156545.com-彩票五百万税后多少| www.ij35.com-福利彩票app| www.33428.cc-海南竞彩-| www.w84.cn-体育彩票每周几开奖| www.499839.com-新加坡快彩-| www.503726.com-江苏足球竞彩网首页| www.593828.com-东方彩票是黑平台吗| www.698019.com-6和彩生肖开奖结果| www.8582.site-江苏苏福彩快三| www.40345.cc-宝哥足彩14场| www.142026.com-中国正规彩票app| www.6476.xyz-满堂彩手机版| www.109046.com-欧赔与亚盘足彩研究| www.85680.com-打开彩-| www.052355.com-大发彩票客服| www.131090.com-太康定亲彩礼| www.207203.com-花生彩票什么情况| www.301295.com-精彩十分推荐| www.679108.com-彩票代理返点有多少| www.757290.com-体彩86期开奖号码| www.825365.com-七星彩精英数据分享| www.289664.com-高频彩是什么| www.620326.com-淘彩票是合法的吗| www.325937.com-彩宝店app下载| www.42cc.cc-足彩盘口水位看胜负| www.992575.com-福彩6十1最新开奖| www.ih08.com-买彩票输的一无所有| www.429.pw-2343彩票app| www.173617.com-最大正规快三平台| www.100027.com-彩票首充送彩金| www.183603.com-彩票怎么买-| www.618745.com-足彩关小刀最新推荐| www.858394.com-彩票店装修-| www.53518.cc-时时彩88平台网址| www.637577.com-体彩彩票兑奖方式| www.ez70.com-靠谱的彩票挂机平台| www.383557.com-竞彩91彩票联盟| www.567611.com-安康福彩加盟条件| www.910128.com-粤彩联盟彩图| www.04up.com-画彩铅画用什么纸好| www.ou48.com-甘肃快三漏号统计| www.377204.com-体彩对联-| www.628513.com-顶级彩票登入| www.983914.com-彩99能提现吗| www.6wa.com-足彩九场胜负彩结果| www.442012.com-五州彩票官网| www.237397.com-足彩竞猜结果| www.33222.cc-福彩宝充值会员骗局| www.792093.com-福彩什么是码积| www.002305.com-时时彩四定规律| www.813236.com-福彩3d组六多少注| www.75sg.com-六给彩开奖玩法规则| www.949061.com-今晚福彩开奖号查询| www.ey.com-竞彩网首页-| www.97ir.com-彩排近义词是什么| www.480.org-七星彩尾规-| www.4553.biz-乐彩客软件下载| www.9878.org-万通五分彩平台下载| www.610586.com-彩钢瓦安装方法图解| www.682288.com-微信盘彩票-| www.756627.com-手机淘宝买彩票| www.819793.com-乡镇福彩赚钱吗| www.916129.com-买私彩报警有用吗| www.971603.com-手机万豪彩票合法吗| 网易彩票www.504033.com| www.gs96.com-大掌柜彩票app| www.we99.com-兰州市福彩中心兑奖| www.02lb.com-彩虹世界网络连接| www.83ub.com-天彩粮餐饮贴吧| www.050880.com-幸运彩票打不开| www.8686.mobi-体彩七星彩24| www.71211.com-博彩改号-| www.122097.com-欢乐时时彩开奖结果| www.208860.com-彩神通代理会员专用| www.663411.com-123体彩预-| www.156215.com-好彩堂跑网-| www.749307.com-彩神v11靠谱吗| www.896249.com-玩彩网首页-| www.958582.com-福彩十分钟开| www.999179.com-e球彩包赢玩法| www.by03.com-苏州快三开奖| www.xu40.com-38彩票app-| www.31rp.com-彩虹手机壁纸高清| www.1371.vip-电脑彩票有规律吗| www.7456.pw-体彩顶呱刮-| www.38738.cc-盐城中彩票-| www.91505.com-中彩那天的文章| www.062807.com-网上哪能买彩票| www.899509.com-湖北福利彩票申请| www.161069.com-华宇彩票app下载| www.005589.com-时时中彩票下載| www.594656.com-体彩可以买nba吗| www.715258.com-彩票中奖达人杨光华| 购彩在线www.66332n.com| www.117174.com-能用的体彩app| www.62565.com-江苏快三真假| www.25376.cc-画彩铅桃花-| www.608177.com-质量好信誉好的竞彩| www.700205.com-美人鱼彩票app| www.962612.com-时时彩8位专家计划| www.363564.com-古桥和彩虹阅读理解| www.2219.in-福彩3d澳客网| www.9427.cn-一分彩票走势图| www.41310.com-网上彩票赚钱是真的| www.666488.com-玩彩不懂得止损咋办| www.277987.com-南方双彩网手机版| www.mc47.com-中彩网快三图怎么看| www.925800.com-七乐彩除6走势图| www.8472.com-999彩票官方网址| www.8vw.com-买体彩用什么app| www.540547.com-彩神争8苹果| www.603916.com-福彩了d-| www.666796.com-陕西福彩提现不到账| www.728408.com-体彩销售时间| www.780523.com-快三权威平台真假| www.830603.com-彩票大全白菜|