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天

知道了
百盈PK10 www.433330.com-菜家园彩票-| www.460810.com-今日买彩黄历| www.613282.com-彩票直通车app| www.759078.com-腾讯微彩国际| www.884891.com-百度上可以买彩票吗| www.978756.com-快三统计软件| www.ba88.com-江西福利彩票兑奖| www.772753.com-时时彩稳赢投法| www.739621.com-快乐十分彩票注册| www.88fx.cc-北京今日快三中奖号| www.011093.com-福彩手机彩票网| www.114325.com-好用的福彩app| www.21561.cc-实体店彩票网上销售| www.jq04.com-分分彩输了十万| www.61um.com-全民足球彩票靠谱吗| www.1784.cm-双色球购彩截止时间| www.8385.bid-广州福彩票开奖查询| www.8mc.cc-中国芸彩数字心理学| www.103035.com-中大奖彩票网app| www.311.cx-金巴黎彩票链接| www.47110.com-好彩票怎么下| www.51131.cc-手机淘宝双色球彩票| www.779176.com-王者手游彩票| www.227940.com-彩票查询七星彩| www.501815.com-台湾基诺彩开奖网站| www.14514.cc-购彩堂一分快三| www.6288.me-湖北竞彩行情| www.770.hk-简笔彩色画-| www.669818.com-彩色沥青混凝土比重| www.796944.com-韩国彩票预测| 大赢家彩票平台www.976981.com| www.33yx.cc-网络彩票兼职代打| www.5320.cn-腾讯分分彩任三单式| www.026830.com-体彩481开奖号码| www.116081.com-彩虹周杰伦下载| www.299249.com-买体彩彩票违法吗| www.900734.com-明发彩票坑人| www.984722.com-福利彩8是不是真的| www.fo25.com-足球e球彩总进球数| www.505740.com-举报黑彩代理| www.26ip.com-易发彩票辅助软件| www.1727.cn-彩工网快3贺老师| www.94682.com-竞彩360足球| www.0058.top-福利彩票哪种容易中| www.918166.com-海南私彩庄家软件| www.do3.com-什么app能玩快三| www.665322.com-四川体彩金七乐技巧| www.zm47.com-数字新浪彩票网| www.723.website时时彩任选二怎么玩| www.7963.com-彩博888赌场| www.898739.com-678彩票pk10| www.301294.com-广东福彩3d走势图| www.68043.com-彩票3d秘密-| www.326044.com-万彩吧双色球预测| www.901258.com-家彩网排列三开机号| 500彩票www.50051i.com| www.b85.net-体彩游泳夺金视频| www.4673.biz-为什么富人不买彩票| www.57125.com-江苏快三统计遗漏| www.9779.cn-快三的跳法-| www.181832.com-彩票三大定律| www.3954.biz-燕赵彩票排列7| www.md09.com-三分彩官网开奖结果| www.430770.com-江苏彩礼-| www.920907.com-彩神500app-| www.996807.com-双色球彩票机选一注| www.jt41.com-新3d彩定位胆技巧| www.727113.com-中彩网3d论坛区| www.857137.com-信发彩票-| www.925273.com-体彩排三定胆杀号| www.979810.com-彩票导航123| www.cp3362.com-快三大奖彩票| www.027683.com-彩票的流水是什么| www.994721.cc-体彩十一选五任三| www.468860.com-高频彩票记录| www.564078.com-贵州多彩贵州城| www.278885.com-3d杀号佳彩-| www.526991.com-彩神x登陆-| www.97648.com-完美彩票直播聊天室| www.1294.xyz-凤凰黑彩登陆| www.525065.com-圣地彩开奖记录| www.249885.com-湖北福彩app| www.96173.com-最新千亿彩票| www.057520.com-天津福彩快三| www.123615.com-河北福彩排七| www.971500.com-陕西福彩3b字谜| www.pn93.com-武汉快三推荐| www.701626.com-中国彩软件下载| www.886538.com-大发彩票登录网址| www.078963.com-七星彩复式计算器| www.450541.com-七乐彩每天几点开奖| www.547898.com-六开彩网址-| www.618714.com-永久彩票下载| www.684007.com-黑彩3d-| www.752907.com-体育彩票几点停售| www.813983.com-高频彩开奖时间| www.877511.com-一分彩票app下载| www.9404.loan-复试彩票中奖规则| www.92267.cc-快三买和值技巧| www.312283.com-福利彩票有哪些玩法| www.mo02.com-快乐彩玩法规则| www.u53.com-九鼎彩票下载安装| www.333455.com-彩票怎么提成| www.439399.com-出彩票的游戏机作弊| www.670152.com-256玩彩票ios| www.734566.com-足彩19020期| www.794208.com-买彩票只有输| www.867614.com-七星彩网易开奖| www.954254.com-八亿彩官方下载| 500彩票www.314677.com| www.81zk.com-足彩双平解释| www.931411.com-江苏体彩7位数玩法| 彩客吧www.33ckb.com| www.sj86.com-时时彩网app| www.577591.com-福彩三d图谜第二版| www.685302.com-彩票人工计划软件| www.766513.com-我要加盟彩票| www.840126.com-广东竞彩-| www.917617.com-必赢彩票ios| www.977830.com-猫彩素描-| www.ad94.com-昨福利彩票开奖号码| www.z23.net-云购彩票注册邀请码| www.947643.com-买彩金的都后悔吗| www.et29.com-上海体育彩票| www.911.tv-彩票中奖金符咒法| www.7969.xyz-博彩ui-| www.7394.top-沈阳彩票站出兑网| www.062520.com-淘宝上买彩票怎么买| www.004209.com-蓝精灵彩吧图库a| www.113383.com-牛蛙彩票全年资料| www.361601.com-彩票开机号查询| www.501156.com-重庆5分彩公正吗| www.582151.com-2356官方彩票| www.666466.com-lcz9购乐彩站| www.729165.com-福彩3d乐彩论文坛| www.801355.com-奔驰彩票可靠吗| www.864242.com-彩票123谁有链接| www.921138.com-神彩v1-| www.969296.com-福彩公益金管理| 中国福利彩票www.34788n.com| www.014077.com-七星彩43结果| www.na50.com-全国快三彩票app| www.38077.cc-福彩三d大彩网| www.113777.com-一分彩开挂-| www.93dy.com-一寸彩照多久可以拿| www.217223.com-彩票美女托的套路| www.285180.com-江西福彩中心地址| www.633929.com-7彩酒店的英文| www.36578.cc-玖亿彩票官网| www.004572.com-竞彩二串一稳赚技巧| www.063315.com-福彩押金-| www.298356.com-快三最大奖金是多少| www.367103.com-日本彩票官网| www.431479.com-超级彩票缩水软件| www.507218.com-五彩滩-| www.558754.com-彩虹的寓意象征意义| www.598163.com-福彩计算器-| www.771244.com-彩幺机-| www.871127.com-体彩7星彩下期预测| www.960162.com-布衣图库好彩网| www.cai6033.com吉林省体彩兑奖流程| www.uw33.com-有没有玩快三赢钱的| www.85gf.com-大发彩票输了十万| www.3019.com-正彩办公用品|