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.938956.com-网易竞彩单场专家| www.531835.com-生命没有彩排| www.630227.com-福利彩票2月24日| www.723591.com-趣9购老彩票破解器| www.819733.com-彩票的好处与坏处| www.926628.com-瑞彩祥云互动彩票| www.984249.com-快乐10分中奖彩票| www.ck43.com-彩票快三中奖规则| www.zm94.com-辽宁唯博彩票信息| www.888.hk-彩93彩票好吗| www.74513.com-自创彩票加减法| www.334566.com-网络彩票不给提现| www.441387.com-香港十分彩-| www.541062.com-懂球帝买足彩在哪里| www.620561.com-世界彩票发展历史| www.698096.com-下载凤凰彩票网| www.780079.com-彩铅画星空教程| www.862301.cc-秦皇岛体彩电话号码| www.2371.biz-今日福彩3d校验码| www.8476.xyz-亿彩彩票能提现吗| www.46658.com-西安三彩集团怎么样| www.001049.com-双色球专家开门彩| www.852028.com-时时分分彩是假的吗| www.655155.com-查3d彩票怎么玩法| www.739688.com-苹果彩票导航线路| www.824699.com-梦想网快三-| www.903833.com-彩票现金平台出租| www.56to.cc-彩票网吧-| www.0871.cm-全发国际彩票| www.218201.com-吉林市快三盘| www.81og.com-北京足彩单场怎么玩| www.463695.com-玩万豪彩票合法吗| www.593740.com-彩吧开奖结果| www.z76.com-综艺福彩彩神赛| www.99tv.com-科学预测彩票| www.552340.com-韩式1.5分彩计划| www.397537.com-北京快3爱彩乐| www.4805.vip-时彩万位杀号方法| www.174422.com-三分快三计划网| www.233754.com-三的走势图今天福彩| www.39693.cc-老卓易彩票-| www.813742.com-体彩十一选五宁夏| www.95pm.com-私彩开奖-| www.6681.in-彩虹6号对配置要求| www.393947.com-彩虹彩票官方网站| www.293266.com-易彩一彩民福地测速| www.388432.com-小米彩票合法吗| www.334353.com-快三现在一天多少期| www.626295.com-9号彩票官方网站| www.64560.com-竞彩如何套利北单| www.265595.com-上海快三就开奖| www.438467.com-长沙特立路体彩店| www.337113.com-彩经网免费专家预测| www.872670.com-福彩迷是什么| www.942507.com-深圳体彩兑奖中心| 乐彩网www.lcw199.com| www.6448.xyz-官方天天彩票网站| www.20461.com-竞彩计算器篮球胜负| www.331110.com-河北彩票11选5| www.718484.com-见到彩虹寓意| www.716707.com-彩铅教程画简单花卉| www.271658.com-快三走势图表格下载| www.380128.com-彩鸾归令的意思| www.774.in-时时彩怎么能作弊| www.9781.biz-了安然七星彩| www.8211.loan-东方彩票香港| www.251195.com-彩8-| www.576241.com-河北省快三遗漏之| www.7715.space-中华福彩下载| www.169552.com-吉林省体彩兑奖流程| www.164164.com-竞彩4×4-| www.800615.com-体育彩票看不懂| www.3478.cn-七乐彩的开奖时间| www.1285.xyz-福利彩票星期几开奖| www.06819.com-正规的福利彩票软件| www.521255.com-彩吧vip快三| www.595983.com-飞彩彩票-| www.666565.com-万达网彩票-| www.231710.com-福彩过滤器-| www.523928.com-胜负彩分析预测| www.651581.com-新加坡永利彩票| www.730507.com-新彩吧手机版字迷| www.797022.com-哪个网上可以买彩票| www.886407.com-大发快三登录注册| www.958865.com-98098j彩票网| 亿发彩票www.901591.com| www.64rm.com-2017足彩交流群| www.8966.com-福利彩票双色球自选| www.75055.com-体彩刮刮乐5元种类| www.550202.com-淮安体彩网-| www.613171.com-福彩3d预l测分析| www.679565.com-老公买彩票欠下债务| www.752998.com-买足彩软件-| www.830302.com-彩票资料大全首页| www.886396.com-好运来彩票怎么注册| www.947481.com-福彩3d在线缩水| www.988955.com-迅盈彩票官网下载| www.ra5.com-青海快三今天开奖| www.366971.com-大鱼海棠简单彩铅画| www.301393.com-6合万彩吧-| www.04gl.com-手机玩快三app| www.25976.cc-彩虹是那七色| www.303685.com-一福彩17500| 十三国际www.516113.com| www.8265.me-福利彩票大乐透复| www.sx91.com-彩票号-| www.23at.com-六十一体彩查询| www.436323.com-北京快3派彩助手| www.410091.com-彩票新浪彩票网| www.rb4.com-体彩天津11选5| www.16066.cc-彩票双色球怎么玩的| www.137964.com-头奖彩票新闻| www.715156.com-彩神争霸官方| www.1300.vip-求个彩票交流群群号| www.8582.biz-彩票360专家杀号| www.411762.com-时彩稳赚技巧| www.38433.com-好彩蓝香烟-| www.82847.com-彩乐乐正规吗| www.186815.com-彩票五分快三| www.487728.com-现在哪个彩种有漏洞| www.639678.com-彩团网cai7-| www.755856.com-苹果彩膜好不好用| www.704614.com-336时时彩下载| www.791051.com-时时彩机器人价格| www.916469.com-下载体育彩票大乐透| www.cp9838.com-手机快三投注技巧| www.664844.com-广州体育彩票兑奖处| www.26115.cc-体育彩票nba竞彩| www.820456.com-道教灵符彩票中奖符| www.892646.com-中国足彩怎么买| www.962522.com-福彩双色球兑奖方法| www.cai6544.com甘肃快三走势分析图| www.567148.com-加拿大彩票开奖| www.666252.com-万达彩票台子| www.09xw.com-x23幻彩版配置| www.76fl.com-七乐彩历史号| www.051906.com-彩票门路-| www.032773.com-95彩票app下载| www.583101.com-福彩四等奖-| www.666992.com-乐彩一般怎么买| www.920064.com-摇摇乐彩票在线| www.cp5765.com-k3彩票是真的吗| www.101901.com-时时彩源码出售| www.554383.com-赤打一体彩术语| www.301.la-龙彩娱乐黑钱| www.154231.com-中福快三开奖| www.610992.com-彩票领导者安全吗| www.089207.com-台湾快三开奖结果| www.531507.com-竞彩彩客网下载| www.766655.com-东莞彩乐糖果厂| www.999126.cc-ic汇彩网app| www.g38.club-苹果彩票网登录网址| www.662057.com-头头博彩是黑网么| www.447066.com-福彩主持人周子涵| www.34mp.com-七星彩开奖准确时间| www.62qr.com-风铃艾彩原创合集| www.085103.com-22彩票官网-| www.206975.com-网易彩票老版本| www.297827.com-河南快三统计图表| www.0014.cc-十二生肖的彩票开奖| www.33798.com-招聘彩票分析师| www.871786.com-利彩可以做吗| www.474441.com-福利彩票还能相信吗| www.079670.com-彩票双色球的买法|