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.4458.cn-分分快三会不会作弊| www.502068.com-足彩如何看-| www.444006.com-彩六64-| www.4191.top-七彩云和-| www.011135.com-手机可以投注的彩票| www.753936.com-购彩之家真的吗| www.867699.com-彩票助赢软件官网| www.251685.com-中彩吧可信吗| www.26933.cc-华夏彩票网上投注网| www.0183.vip-国彩有风险吗| www.093080.com-彩钢围挡压瓦机| www.768088.com-外国彩票网站| www.873964.com-贵阳市福利彩票| www.996469.com-新新粤彩-| www.sq46.com-今期彩票指南报纸| www.41ng.com-体彩排到三开奘结果| www.332390.com-彩票mobile-| www.37vt.com-时时彩单双大小| www.239839.com-大发快三彩票技巧| www.435303.com-福利彩票14人贪污| www.066955.com-博彩app安全吗| www.923861.com-cp彩票网页版| QQ彩票www.89894n.com| www.512775.com-凤凰彩铅画图片| www.691652.com-高频彩网站-| www.816080.com-河北快三技巧视频| www.59zw.cc-730彩票网-| www.287080.com-彩票开奖软件大全| www.qx.com-北京福彩快3app| www.oi73.com-牛彩总汇3d藏机图| 乐彩www.le96.com| 大赢家彩票www.579411.com| www.972845.com-彩客网手机版下载| www.lz67.com-青海西宁快三| www.87gb.com-2345彩票网登录| www.3928.biz-男方悔婚要退彩礼吗| www.637.website3b福利彩票总汇| www.jy15.com-广西快三不同推荐号| www.45km.com-盛大彩票是真的吗| www.659365.cc-彩票开奖模拟器下载| 易彩网www.12455x.com| www.681.net-校长体彩福彩推荐号| www.173227.com-甘肃快三对子预测号| www.578351.com-甘肃体彩玩法| www.658245.com-湖北电视购彩票| www.773027.com-红中彩票平台客户端| www.ta43.com-必赢彩票网骗局揭秘| www.14hm.com-体彩任-| www.517.live-新浪福利彩票双色球| www.838557.com-竞彩盘的图片| www.926411.com-体育彩票下载并安装| www.977011.com-河南出台彩礼| www.cp148.com-什么是快三彩票| www.571566.com-好运彩票占卜| www.0701.cc-彩票ag是啥-| www.19to.com-穿越成九彩僵神| www.8880.online竞彩书籍排行榜| www.772.in-微彩娱乐靠谱吗| www.8811.vip-看福彩3d开奖号| www.029720.com-什么利彩-| www.135685.com-体彩装修目录| www.8443.xyz-彩富网址-| www.30nq.com-福利福彩app| www.1911.cc-彩福快三是官方的吗| www.413477.com-五福彩彩票合法的吗| www.88417.cc-奥地利彩票中最大奖| www.302535.com-七星彩软件下载| www.934005.com-今日双色球彩票指南| www.66364.com-宝乐彩提现-| www.yz59.com-五福彩票正规吗| www.22774.com-吉林快三赌博新闻| www.83815.com-七星彩版-| www.7719.net-所以彩票318| www.6346.cc-福彩6等奖多少钱| www.341576.com-刮刮乐彩票宣传语| www.910003.com-昆明亮彩光电| www.055064.com-竞彩网比分-| www.137529.com-福建体彩网牛材网| www.05nd.com-代玩彩票游戏| www.455827.com-炒彩票平台能玩吗| www.6111.net-新2彩票论坛一肖| www.823942.com-湖北快三78期| www.885991.com-彩票在线平台| www.639784.com-天天悦彩-| 幸运彩票www.444070.com| www.234897.com-彩500正规软件| www.585877.com-中利彩票app| www.69910.com-广西体彩电话| www.130868.com-立彩app下载地址| www.74588.cc-中国竞彩网手机版| www.223901.com-浙江体彩网20选5| www.401610.com-胜负彩18167| www.261199.com-竞彩任选九场开奖| www.321233.com-彩票开奖神器| www.540080.com-手机端下载彩乐汇| 818合彩www.www.1555hc.com| www.650172.com-博彩跑分平台有哪些| www.8188.online8炫彩自助彩票终端| www.lj16.com-彩票app加奖| www.869893.com-苹果x原彩显示在哪| www.754449.com-天津时时彩彩票| www.xf19.com-308彩票苹果| www.037708.com-安徽快三和值详细| www.90kj.cc-博彩8888-| www.024163.com-体彩往期中奖号码| www.198226.com-3d彩吧图-| www.361815.com-中国体彩票开奖| www.616446.com-竞彩胜平负什么意思| www.200550.com-查一下昨天的彩票| www.1608.wang-哪里的彩票合买系统| www.566092.com-pp彩票能取现吗| www.065225.com-65彩票-| www.290701.com-内蒙快三总共多少期| www.523006.com-时时彩走势-| www.683727.com-恒彩彩票-| www.906652.com-彩票云南快乐十分| www.220133.com-快三开挂器-| www.9838.cn-古建彩绘沥粉器| www.126724.com-彩票api幸运飞艇| www.913.cm-教手绘彩铅唯美蝴蝶| www.346.com-七星彩投注网站盘| www.99504.com-手游彩票平台哪个好| www.813468.com-皇冠足彩网站| www.15253.com-温州体彩阳光征召| www.078019.com-彩八仙app苹果| www.957742.com-福彩快三速查表图片| www.860557.com-外围彩票网站大全| www.vb3.cc-彩票123手机版| www.180372.com-昨天快三开奖号码| www.195983.com-中国江西福利彩票网| www.731837.com-福彩3d组选077| www.136891.com-武汉彩票投注站转让| www.pv19.com-彩票倍投砍龙| www.n21.name-华语京彩挂机平台| www.2146.xyz-香港濠江天空彩票| www.22957.cc-中彩那天电子课文| www.ky79.com-彩票28是什么| www.uw56.com-快三砍龙技巧| www.586803.com-微彩吧的号怎么看| www.58tl.com-三分彩走势图怎样看| www.235744.com-齐鲁风采t乐彩| www.613255.com-彩票程序开发哪家好| www.34226.com-保定市体彩中心电话| www.958084.com-新乐彩11选5开奖| www.513505.com-彩票几分钟一期| www.il43.com-今日彩app下载| www.659.net-新版天下彩-| www.062023.com-彩客足球比分| www.335331.com-彩票3d怎么玩法| www.wf81.com-彩票开奖结果查询表| www.250779.com-天天中彩软件| www.336645.com-排五体彩排五开奖号| www.200085.cc-体彩开奖结果排列5| www.990590.com-浙江体彩订票系统| www.457418.com-恒彩娱-| www.4710.vip-多盈在线彩票安卓| www.68128.cc-重庆寸时彩开奖号码| www.27po.com-8号彩票软件下载| www.917133.com-彩票33骗局-| www.847993.com-北京古建筑彩绘图案| www.110975.com-2018·cc彩票| www.387500.com-七星彩历史今天开奖| www.587920.com-预知彩票-| www.948271.com-多彩网时时彩|