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.55376.cc-时时彩代理犯法吗| www.141558.com-重庆时时彩诈骗| www.401.com-江苏不匠彩快3| www.568411.com-合买彩票源码| www.854861.com-极速快三模拟器| www.6018.cn-时时彩十大信誉排名| www.49077.com-福利彩票15选5| www.142477.com-彩八彩票怎么害人| www.71885.cc-长春市体彩电话投注| www.600400.com-买彩票的巧合| www.06542.com-怎样下载3d彩票| www.359279.com-七彩彩票下载安装| www.529551.com-徐文轩专家彩票网| www.779401.com-信彩下载-| www.055083.com-彩票群名霸气好名| www.319344.com-博彩彩票-| www.504598.com-彩绘近义词-| www.659407.com-彩票开p62-| www.802707.com-优彩网彩票优惠券| www.931182.com-色彩三要素-| www.zh3.cc-乐彩太湖字迷网| www.12zf.com-微彩吧线路-| www.905356.com-网上买竞彩违法吗| 500彩票www.50074f.com| www.se97.com-好易彩-| www.573910.com-中国彩票十大牛人| www.990560.com-爱彩网app下载| www.ny30.com-玄学与彩票-| www.955595.com-梦到和人平分彩票| www.sl16.com-重庆实时彩骗局| www.393493.com-今晚上福彩出什么号| www.30pj.cc-足彩复式投注怎么算| www.86999.com-福彩3d组六-| www.125049.com-彩票真能中奖| www.973287.com-彩虹mv-| www.dm50.com-小鹿彩票奖表下载| www.xv70.com-彩票中奖强制捐款| www.55yx.cc-求职来了位彩票高| www.3999.date-公海娱乐博彩| www.660861.com-腾讯分分彩算法| www.814716.com-邯郸银行人员买彩票| www.126075.com-12500彩票开奖| www.207678.cc-老彩民app玩快三| www.2364.shop-七彩神仙鱼论坛| www.777076.com-时时彩倍投骗局| www.923900.com-彩票星期几可以买| 非凡彩票www.77210c.com| www.565982.com-福彩过滤彩票软件| www.42to.com-香港天下彩天空| www.641268.com-w600万娱乐彩票| www.379191.com-三d乐彩网开奖结果| www.453166.com-领先彩票平台| www.602710.com-网上买彩票真的假的| www.715735.com-什么彩票是五位数| www.979960.com-农村开彩票店怎么样| www.fo70.com-内蒙古福利彩票网站| www.6004.me-明天开彩票吗| www.79mf.com-以往彩票开奖查询| www.764733.com-介绍彩票送彩金平台| www.870566.com-盛大彩票安全吗| www.948127.com-彩票到家-| www.086861.com-篮球彩票怎么玩法| www.568034.com-杳江苏快三开奖号码| www.083.me-福彩双色球预测频道| www.65rb.com-湖北体彩大乐透大奖| www.659091.com-大发快三如何买豹子| www.788455.com-中中国竞彩网首页| www.910291.com-3d胆码预测家彩网| 华为彩票www.hw4444.com| www.x53.me-快钱彩票白菜群| www.80xp.com-天天时时彩软件下载| www.899415.com-彩神通下载-| www.5510.vip-新昌双彩茶苗| www.18617.com-265彩票软件下载| www.71886.com-刮刮乐彩票领取方式| www.088069.com-亿彩彩票app登录| www.170926.com-一分快三背后控制| www.536.space-腾讯分分彩玩法秘籍| www.030116.com-逼真彩铅画作品| www.238024.com-779彩票官网| www.486553.com-附近哪有福彩销售点| www.2509.cm-6彩天下-| www.38782.cc-中彩靠谱吗-| www.641972.com-体育彩票柜台| www.729018.com-福彩门户ok8us| www.018.xyz-可刷9码的彩票软件| www.130463.com-彩票中奖号码所有期| www.15773.cc-零基础学彩铅入门| www.l09.net-人人中彩票中奖图片| www.47di.com-超级大乐体育彩票| www.0291.cn-江阴竞彩店转让| www.659710.com-昨天内蒙快三| www.689396.com-山东福彩投诉电话| www.23qd.com-85彩票网站-| www.99gc.cc-彩天地娱乐-| www.348245.com-彩客网手机完整比分| www.435678.com-遵义有几处卖彩票| www.12278.cc-山东彩票软件| www.89608.com-胜负彩4月赛程| www.cp3779.com-幸运快三怎么玩| www.581310.com-新看彩啦3d-| www.678871.com-大发大掌柜彩票平台| www.784000.com-彩99新版-| www.854585.com-赵公明福彩-| www.925908.com-快三秒电话吉首| 乐盈彩票www.gy11.com| www.358461.com-手机软件彩票安全吗| www.460863.com-天空彩开奖-| www.912447.com-8号彩票站是真的吗| www.886449.com-百度乐彩彩票| www.959818.com-金星vr3分彩官网| www.ih2.com-快乐彩-| www.xh89.com-7彩娱乐注册| www.32rk.com-体彩3地出什么| www.132099.cc-玩彩彩票网-| www.201710.com-购彩大厅登录| www.264208.com-财新彩-| www.69834.com-盈发彩票主页| www.562357.com-豪彩app安卓版| www.660460.com-体肓彩票排列五| www.732556.com-全民汇彩票是真是假| www.vw79.com-快三输了很多钱| www.58tu.com-体彩号码怎么选| www.479122.com-江西体彩有哪些| www.577774.com-福彩三的太湖字迷| www.7601.me-彩票外挂软件app| www.bs02.com-华彩彩票骗局| www.241934.com-七星彩如何看规律| www.3539.com-属虎买彩票幸运数字| www.16249.com-ζ3d走势图新浪彩| www.32ub.com-体育彩票与福利彩票| www.07389.com-玩高频彩的正确心态| www.87kf.com-快三九宫图-| www.298695.com-福利彩票开奖号码开| www.188852.com-浙江福彩快乐彩| www.306673.com-彩票中数字规律| www.886226.com-福彩双色球杀号定胆| www.984365.com-买快3彩票的软件| www.ow82.com-乐彩3d论坛电脑版| www.9501.cc-二手彩钢压瓦机价格| www.69653.com-彩票机选中奖的多吗| www.8777.com-足彩推荐预测app| www.020215.com-体彩排列3开奖| www.543554.com-福彩3d左岸杀三码| www.29gn.com-昨晚福彩号码多少| www.299093.com-三分彩大小单双技巧| www.911.hk-念什么咒语能中彩票| 福彩www.86267z.com| www.635242.com-七彩本草滴丸是传销| www.807257.com-旧彩票有回收的吗| www.881741.com-q彩网大发快三| www.947604.com-彩票投注怎么玩| www.985249.com-好彩堂跑狗图彩报| www.yq25.com-新三d福彩合法吗| www.2426.org-北京28彩票网站| www.114148.com-贵州中奖彩票| www.855276.cc-深圳市体彩中心官网| www.953362.com-江苏快三点数计划| www.dh16.com-彩票达人是什么意思| www.806073.com-彩票精准计划| www.913344.com-彩客网彩票下载| www.992848.com-福彩单双大小走势图| www.kp95.com-福利彩票字谜大全| www.451490.com-腾讯分分彩分析视频|