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.69619.com-9h99彩票-| www.565945.com-一线彩库-| www.2312.org-港版好彩绿多少钱| www.924322.com-世界彩票最高奖金| www.998939.com-分分彩平台官方下载| www.jx35.com-彩票快3手机版| www.433335.com-彩二-| www.39285.cc-全福彩app-| www.012532.com-摇摇彩票-| www.136636.com-贵宾室彩票用户注册| www.223748.com-广东体育彩票官网| www.210042.com-彩神v攻略-| www.9647.vip-牛彩大乐透下期预测| www.6761.org-赢钱彩登录网站| www.73787.com-9188彩票下载| www.807165.com-竞彩按比例投注计划| www.843298.com-体育彩票基金会| www.730281.com-鄂尔多斯体彩加盟| www.875359.com-玩手机彩票输了4千| www.963799.com-竞彩足球让平规律| 大赢家彩票平台www.917963.com| www.972689.com-彩铅画简单风景| www.vn74.com-快三走势快三走势| www.61084.com-网络彩票投诉| www.08et.com-6h彩友网高级彩图| www.03534.com-佳缘男七星彩骗局| www.98155.com-一分时时彩开奖网| www.q09.cn-利盈彩票-| www.93pm.com-我找到淘彩吧| www.665557.com-七乐彩随机一注| www.895859.com-快三实时-| www.981846.com-尊彩网-| www.fw49.com-481彩票网下载| www.p80.in-滴滴彩票多少提现| www.968242.com-一分彩要怎样才算中| www.hr3.com-上海快三奖金对照表| www.875871.com-星彩网彩票大赢家| www.981413.com-彩票下级返点越高| www.jq98.com-能买快三的app| www.04oj.com-湘潭福彩中心地址| www.885.cm-9万彩票是正规的吗| www.256932.com-正规的彩票预测软件| www.963175.com-零基础学彩铅| www.ls89.com-群计划买彩票| www.04wb.com-体彩排五出的多少号| www.618.date-香港五分彩是否官网| www.5577.hk-福彩3d新会员布衣| www.0475.date-钻石彩票app| www.672621.com-七星彩专家预测默彩| www.851021.com-财神时时彩综合工具| www.347658.com-彩虹特殊含义| www.578903.com-会员注册快易彩| www.695917.com-胜负彩复式投注表| www.826688.com-彩票签到活动| www.979641.com-七天彩票真的假的| www.ca79.com-快三屠龙最多几个| www.717068.com-彩铅哪个牌子好| www.238350.com-大发快三是真的吗| www.2zc.cc-彩票22是什么平台| www.896050.com-下载十分彩-| www.979053.com-看快三用什么软件好| www.hx2.com-彩票专业术语| www.nq73.com-重庆时时彩官方助手| www.8pm.cc-牛娃彩免费资料大全| www.216554.com-民间买彩票中奖咒语| www.315005.com-七星彩单式中奖规则| www.433893.com-毕节中彩站-| www.689109.com-天天彩票平台| www.810723.com-の更多精彩内容| www.028975.com-如何研究彩票走势| www.55504.cc-重庆十字彩-| www.2823.cn-人人中彩票解绑| www.9762.biz-快三开到几点结束| www.490809.com-怎么在淘宝买彩票| www.317888.com-北京福彩pk10| www.437321.com-南宁三彩专卖店地址| www.610351.com-足彩最简单玩法| www.029061.com-乐彩网开奖公告| www.572792.com-香港玩彩网-| www.671627.com-万彩吧彩票c8| www.744605.com-宏盛彩票官方网站| www.803539.com-体彩61开奖时间| www.867359.com-一定牛彩票怎么样| www.087045.com-鸿博彩票app下载| www.064902.com-重庆彩票娱乐平台| www.734611.com-福利彩票时时开快三| www.811487.com-太子彩票下载安装| www.905188.com-亿彩彩票输十万| www.992917.com-湖北快三共享走势图| www.ba06.com-内蒙古福利彩票网址| www.tc15.com-彩票靠概率取胜| www.971668.com-亿发彩票平台可靠吗| www.tp.com-购彩大厅彩票| www.ss20.cc-彩票33安卓版| www.94766.com-福彩3d结果查询| www.86671.com-体彩手游彩-| www.4929.vip-彩吧p3试机号今天| www.324395.com-彩票第一把手| www.65ji.com-山西福彩官网首页| www.3611.com-鼎誉国际彩票| www.9980.top-福彩3d彩吧图今天| www.04325.com-分分彩分析软件| www.64365.com-竞彩足球平局研究| www.152051.com-彩票超越软件| www.ys49.com-山东省彩票兑奖| www.644577.com-足彩最新伤停| www.750116.com-掌上彩票苹果| www.815402.com-福利彩票3d走势| www.885290.com-今期七星彩开奖结果| www.948512.com-3cp上彩票-| www.994187.com-好彩客234-| www.gt4.com-安徽快三购买网站| www.080561.com-破解彩票平台软件| www.268035.com-青海福彩软件下载| www.93367.com-丹麦28彩票走势图| www.654498.com-台州市福彩网| www.769013.com-亚博彩票官方下载| www.838536.com-福利彩如何才算中奖| www.917427.cc-最大的私彩网| www.45972.cc-亿鼎时时彩正规| www.206000.com-福彩骗局-| www.rg12.com-万彩吧福彩3d预测| www.1647.xyz-红彩会下载安装| www.110581.com-七星彩2字现多少倍| www.213272.com-彩名堂ios版| www.207588.com-彩票工具-| www.q02.org-高频彩平台出租价格| www.536268.com-立体彩铅动物| www.601614.com-易彩快三和值大小| www.662992.cc-福利彩票摇一摇| www.762235.com-彩票万博正规平台么| www.568041.com-附近有卖体彩| www.666887.com-国乐彩彩票骗局| www.4793.com-新彩网是黑平台吗| www.179901.com-内蒙古快三预测| www.273191.com-公益福彩合法吗| www.940202.com-举报长春黑彩六处| www.993090.com-七是彩基本走势图| www.pm4.cc-新疆福利彩票| www.rh68.com-北京时时彩官网首页| www.11761.com-幸运28购彩平台| www.921357.com-彩神1分快三辅助器| www.987565.com-河南幸运彩技巧跑马| www.cp8687.com-购彩-| www.85432.com-彩票选号的铁律| www.042847.com-黑龙江快三微信群| www.112299.com-买彩票下载哪个| C9999www.986420.com| www.015945.com-老版的唯彩看球| www.522086.com-三分彩时时彩| www.592530.com-9万彩票安卓版老版| www.652187.com-黄金8五分彩app| www.727330.com-淘宝酷彩会有假吗| www.898288.com-梦见七星彩中奖故事| www.1080.mobi-揭秘职业竞彩高手| www.095454.com-马云收购的彩票平台| www.891901.com-竞彩足球三串一大奖| www.952017.com-5360彩票登录| JJ彩票www.11081.cc| www.657943.com-三分彩开奖走势图| www.768925.com-足彩竞猜app下载| www.865742.com-易迅彩票是真的吗| www.960815.com-彩票送19手机版| www.ag69.com-手机福彩网-|