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.718810.com-彩虹的含义是什么| www.168266.com-福彩精彩十分走势图| www.273505.com-时彩宝典-| www.089001.com-最新彩票33安卓版| www.946612.com-周口那边彩礼多少| www.hj3.com-内蒙古今日快三| www.vz18.com-345彩票app-| www.13yu.com-哪个广播直播福彩| www.048041.com-爱彩乐河北十一选五| www.9230.in-乐事彩票app| www.87761.cc-时时彩宣判-| www.071981.com-福彩双色球154期| www.371387.com-中国足彩馆踩踏论坛| www.486577.com-时时彩追杀系统| www.329393.com-宝贝计划彩票靠谱吗| www.441772.com-竞彩计划真的盈利| www.576489.com-爱乐彩票网-| www.699148.com-华复彩票-| www.713577.com-王者彩票怎么看走势| www.232424.com-足彩玩法有几种| www.57325.com-够力七星彩下载软件| www.788253.com-七乐彩走势图2元网| www.ms6.com-吉林快三直播开奖| www.009342.com-天下彩免费123| www.85mq.com-足彩胜平负十四场| www.565082.com-凤彩网3d热门推荐| www.673032.com-美国彩票开奖| www.790134.com-哪个软件预测彩票准| www.887789.com-彩票店加盟-| www.967491.com-彩票托很多来自厦门| www.d14.in-福彩3d彩票开奖| www.44ij.com-cai93彩票-| www.783.mobi-福州体彩31选7| www.4444.cn-365彩票分分彩| www.89479.com-川沙彩票店-| www.079966.com-997彩票-| www.233818.com-河北体福彩3d玩法| www.3418.cm-怎么样下载好彩| www.591022.com-睢宁双沟彩票中奖| www.679234.com-彩票害人-| www.057689.com-唯彩会彩票预测| www.195769.com-贵州快走势图彩经网| www.8248.biz-有人做假彩票吗| www.73187.com-利盈彩票是真的吗| www.156903.com-彩票中奖符的画法| www.303101.com-22彩票app-| www.382257.com-马云的网上彩票社区| www.507903.com-水立方彩票合法吗| www.595132.com-附近的彩票销售点| www.682109.com-微信买彩票中奖| www.770713.com-昌平水屯彩票站杀人| www.348335.com-同乐城彩票网| www.454796.com-乐彩1充值-| www.551979.com-周一出什么彩票| www.023607.com-七乐彩专家开机号| www.122573.com-彩金自己怎么刷| www.480999.com-亿乐彩官网登录| www.651645.com-优信彩票投注| www.802328.com-即时开彩香港版| www.942813.com-如何玩一分彩| www.cp426.com-吉林快三害死人| www.134451.com-彩票7位数开奖结果| www.97bz.com-彩排的彩-| www.553218.com-竞彩有神单吗| www.258759.com-竞彩蓝球专家推荐| www.969132.com-网易专家预测足彩| www.11ky.com-国家婚姻彩礼规定| www.26gs.com-中国体育彩票照片| www.092689.com-福建官网体彩| www.218221.com-公益福彩是违法的吗| www.968444.com-风采网彩票-| www.774148.com-彩票3d骗局-| www.zo75.com-中国竟彩足球计算器| www.50fj.com-烟台福彩中奖号码| www.222152.com-福彩3d怎么买| www.628565.com-美国纽约快三| www.3785.top-百山东彩票群英会| www.28098.com-常州福彩领奖地点| www.82088.com-福利彩票图迷总汇| www.098993.com-快三彩票怎么下载| www.cp6615.com-快三牛逼计划群| www.023875.com-五行彩票-| www.169013.com-安徽快三走势图今天| www.246998.com-金利彩票下载| www.351291.com-江苏快三彩经网| www.433318.com-奔腾彩票72723| www.553224.com-邯郸体育彩票站点| www.627837.com-体彩任九怎么看结果| www.712883.com-福彩3d图迷与字迷| www.875232.com-新皇冠彩票-| www.981590.com-举报福彩-| www.dg18.com-达人彩票网-| www.h08.com-彩票预测破解app| www.0978.bid-快乐彩大小技巧稳赚| www.981247.com-彩票三星做号软件| www.gr00.com-河南彩票22选5| www.o44.xyz-彩票赚钱方法| www.9386.cc-河北彩礼一般给多少| www.69698.com-彩票直播频道那个台| www.420456.com-买彩票快三的规律| www.538980.com-必赢福彩-| www.698641.com-k彩平台-| www.811522.com-鸿博彩票九鼎团队| www.cr51.com-彩客网app下载| www.57sb.com-注册账号玩彩票| www.1499.shop-彩虹屁文案大全| www.7203.pw-京彩娱乐平台登录| www.793048.com-绵阳市福利彩票中心| www.np87.com-体彩异地兑奖| www.550921.com-香港三合皇彩报| www.566.bid-腾讯nba彩票分析| www.190520.com-江苏e球彩中奖规则| www.774662.com-七乐彩5拖7多少钱| www.43576.com-快三第一门户下载| www.113734.com-下载双彩网论坛官网| 500彩票www.701549.com| 开心彩票www.257015.com| www.qt77.com-时时彩宝典老版本| www.67fi.com-时时分分彩下载| www.114554.com-买彩票哪个app好| www.234461.com-微信转账拍照打彩票| www.376580.com-易彩乐的邀请码| www.021525.com-酷彩app官网| www.003142.com-福彩三地预测| www.138899.com-佰盈彩票是黑网吗| www.732138.com-快三守号多少期合适| www.817888.com-随机彩票中奖率高吗| www.953648.com-香港几种彩票| www.cai0473.com福彩-| www.mt20.com-福利彩票复试玩法| www.0we.com-彩虹的约定歌曲串词| www.90xf.com-神彩88nmcc| www.4717.me-江西体彩100期| www.67894.cc-九龙国际彩票网站| www.293133.com-下载河北快三| www.703563.com-甘肃福彩天地报纸图| www.003333.com-乐艺彩票990| www.0570.com-足球彩票算不算加时| www.445022.com-章鱼彩票就是个坑| www.597070.com-彩薇花护肤品有激素| www.861390.com-彩票任三选技巧| www.hs22.com-快中彩开奖-| www.694336.com-彩票店只卖3d| www.839826.com-福彩彩票标语| www.975426.com-福快三-| www.2ej.com-银河彩票-| www.1916.xyz-体彩店主要什么赚钱| www.330927.com-内蒙快三实时走势| www.558545.com-234天空彩-| www.673105.com-快三现场开奖| www.770097.com-好彩投28彩票| www.868208.com-南国论坛七星彩| www.959054.com-3d字谜新彩吧| www.cp3665.com-大发快三合法吗| www.296611.com-湖北福彩网彩票| www.534560.com-6位数的彩票叫啥| www.693370.com-yy彩票登录平台| www.353049.com-53彩票购彩网址| www.548553.com-河北体彩时时彩| www.654634.com-福彩三d新吧第一版| www.797907.com-彩61网站源码| www.913565.com-快三提现退回| www.990777.com-最新正规购彩平台| www.hc47.com-手机福利彩8合法吗|