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.057103.com-福彩快三和值图| www.486071.com-飞彩网是真的么| www.433469.com-福利彩票中奖案| www.84vz.com-梦想团队彩票计划| www.358835.com-体彩中5个数多少钱| www.6bl.com-星光彩票会不会有假| www.349497.com-乐彩三b字迷| www.451775.com-星彩网短信点播费| www.283193.com-彩票有哪几种玩法| www.09050.com-大发快三盈利技巧| www.126.com-众达彩票登陆| www.653666.com-苏州体育彩官网| www.83293.com-安阳彩票中奖大乐透| www.193485.com-吉体彩11选5| www.894772.com-新大陆彩票-| www.985798.com-福彩3d跨度振幅图| www.au14.com-福彩快乐十分钟开奖| www.888887.com-苹果手机乐彩彩票| www.977788.com-360快三安全购彩| www.af7.cc-中国福彩3d走势图| www.799330.com-福彩一体机购买| www.881182.com-彩票邀请码大全群| www.956027.com-今天3d彩票开奖号| 500万彩票www.03500w.com| www.377466.com-因结婚彩礼分手| www.560577.com-体彩和福彩申请| www.659915.com-网络吉林快三走势图| www.020702.com-二个彩票平台对刷| www.185477.com-北京福彩今日快3| www.sj02.com-时时彩总是输却上瘾| www.75cc.com-时时彩倍数是多少| www.7708.in-护民彩图图库| www.203768.com-5d彩票开奖查询| www.364.cm-冠胜彩票-| www.673651.com-古建彩绘灯花图案| www.195612.com-彩经网走势图| www.57kn.com-快三后二直选怎么玩| www.227731.com-江苏快三和值| www.358581.com-掘金团队彩票微信| www.500833.com-一寸彩照是什么| www.597784.com-彩票投注站概况| www.696644.com-双色球彩票预测网| www.893876.com-彩牛彩票客户端| www.66sf.cc-拉菲2彩票合法吗| www.224266.com-网上买快三可靠吗| www.329860.com-福利彩票双色球购买| www.96xs.com-彩排的意义-| www.34179.com-上海体彩网app| www.515471.com-时时彩刷流水技巧| www.663620.com-怎么看懂篮球体彩| www.5038.vip-购彩之家991| www.288644.com-足彩8串1中奖规则| www.35fo.com-腾讯分分彩规律大全| www.3355.top-彩色的中国伴奏| www.21758.com-网上刷彩金的风险| www.077120.com-俄罗斯28彩票| www.233508.com-快三杀号技巧360| www.712578.com-湖北体彩电话投注| www.827880.com-彩民彩票不能提款| www.913227.com-彩票大嬴家走势图| www.977989.com-大西南彩钢-| www.kr3.com-内蒙福彩网上怎么买| www.qv84.com-河北体彩排三开奖号| www.379989.com-即时开彩现场直播| www.569231.com-福建快三和值图| www.044477.com-福彩门户谁有网址| www.344553.com-天天彩票有棋牌吗| www.438876.com-中国福利彩票站加盟| www.531082.com-手绘兰花彩铅画图片| www.665958.com-聚鑫乐彩是什么平台| www.742598.com-彩票下注软件| www.358473.com-新2彩票靠谱吗| www.444288.com-极速快三玩法窍门| www.530183.com-彩铅水溶款-| www.607320.com-中国中奖最多的彩票| www.672714.com-中彩网开奖公告| www.739869.com-澳门彩票公司如何| www.1106.vip-河北体彩电话投注| www.656546.com-魔方彩票骗人的| www.380318.com-来彩彩票打不开| www.543268.com-天天够彩票-| www.632200.com-玩网彩输了钱怎么办| www.723073.com-常州体彩1800万| www.805267.com-开乐彩怎么玩| www.882673.com-福彩时时乐开奖结果| www.949000.com-福彩论坛首页| 8号彩票www.60108z.com| www.67lx.com-彩c78-| www.29fy.com-大乐透时时彩| www.1107.in-足彩8串8什么意思| www.5252.in-彩票站什么时候开门| www.13429.com-竞彩m串n奖金计算| www.56926.com-福利彩票网上销售站| www.555298.com-精英博彩论坛| www.163.biz-五洲彩票倒闭| www.yb4.com-京彩快三-| www.7186.cc-世界十大彩宝| www.4322.xyz-彩鑫网-| www.259980.com-彩票是合法的赌博| www.330690.com-体育彩票开奖6十1| www.76408.com-彩票老师带单合买| www.9995.cn-多彩办公大师| www.69332.com-彩票韩国1.5分彩| www.86cn.cc-七乐彩3十1多少钱| www.4040.pw-彩票3d怪字神贴| www.386817.com-赛马会彩票网站| www.8198.cn-澳门彩票资讯网| www.397410.com-足球彩票彩客网| www.572927.com-亚博彩票网骗局| www.829646.com-彩票资料app下载| www.028346.com-博友彩登录官网| www.079252.com-北京全民星彩科技| www.187059.com-玩黑彩一定输的原因| www.ov23.com-广西省快三-| www.572512.com-360彩票开奖图表| www.640566.com-新浪爱彩提不出了| www.722965.com-彩票名词解释| www.867970.com-七星彩走势图| www.926467.com-社区数字达人彩票| www.970046.com-彩神通福彩拼搏在线| 亚洲彩www.68568r.com| www.401037.com-七星彩走势图带线| www.cai968.com-快三大小单双口诀| www.2789.vip-福彩排三开奖号码| www.969779.com-福彩现在还敢买吗| www.nj5.cc-精彩十分-| www.ti74.com-百盈快三如何下载| www.2154.cc-怎样玩彩票赚钱| www.109023.com-天下百彩网免费资料| www.266148.com-天津11体彩-| www.337344.com-赌快三输10多万| www.333626.com-体彩彩票怎么看| www.777694.com-三国梦想星彩无惨| www.036335.com-飞扬团队金冠彩票| www.230184.com-盈彩网揭秘在线| www.800728.com-我要3d牛彩涂| www.384809.com-黑客入侵彩票平台| www.985213.com-竞彩单场专家总汇| www.0970.vip-彩票兼职跟单任务| www.460019.com-时时彩带单老师骗局| 天朝彩票www.15239.cc| www.98557.com-足彩5串16玩法| www.733400.com-福彩三d开奖结果| www.888904.com-易彩堂网页-| www.01to.com-福彩布衣精华图| 500彩票www.500763.com| www.819200.com-彩票挂机不亏方案| www.902018.com-手机微信怎么买彩票| www.974910.com-福利彩票充值| www.cai949.com-爱彩乐北京快三| www.33169.com-彩票改规则2月11| www.861683.com-关注彩票开奖查询| www.414140.com-新浪中国竞彩对阵表| www.18054.cc-3位数彩票叫什么| www.uc9.cc-福彩开奖号-| www.as72.com-福彩有5d吗-| www.086601.com-爱刮刮的彩票成本| www.082999.com-快三输了钱-| www.935522.com-彩93下载苹果| www.84666.com-福彩3b牛材网总会| www.067914.com-彩票投注单打印助手| www.11618.com-竞彩完场比分005| www.59988.com-下载微彩站-| www.802317.com-看福彩开奖结果|