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天

知道了
亚洲28 www.008244.com-中国福利彩彩票开奖| www.83983.cc-彩票能异地兑奖吗| www.129555.com-七星彩开码结果查询| www.887362.com-快三官方计划app| www.039967.com-怎么下载吉林快三| www.31823.com-易彩堂――主页| www.83255.com-彩票加注和加倍| www.033698.com-易彩堂娱乐app| www.94648.com-河南省福利彩票兑奖| www.607101.com-app直播彩播| www.77937.com-彩票双色球选号技巧| www.77367.cc-头彩网是个什么网站| www.52190.com-彩胜app-| www.026394.com-私彩平台为何不封| www.109792.com-福彩3d每期猜一字| www.192375.com-买江苏快三的技巧| www.280718.com-重庆彩票官网首页| www.582294.com-深圳体彩举报电话| www.227727.com-湖北快三百万高手| www.334857.com-福利彩票中心开机号| www.770503.com-黑彩输了就翻倍| www.888769.com-盛原彩票-| www.975442.com-分分彩杀号口诀| www.lj22.com-全中彩票97折| www.6cq.com-盛大彩票可靠吗| www.558339.com-简单的彩铅山水画| www.585035.com-0567好彩网页版| www.681414.com-劝别买彩票-| www.872978.com-湖北快三奖金计算| www.b82.vip-卖七星彩用什么软件| www.72911.cc-彩c16ccm-| www.v08.org-彩票中奖人的经验| www.53556.cc-彩81彩票苹果| www.4126.love-彩虹的重力txt| www.37593.com-约彩彩票是真的吗| www.fw55.cc-体彩31-| www.41581.com-每日存送彩票平台| www.97528.cc-福利彩票123等奖| www.95727.com-竞彩半全场神单| www.775792.com-天天彩票计划网站| www.853281.com-体彩e球彩有规律吗| www.913562.com-彩客投注app| www.971540.com-手机彩票客户端下载| www.jz.cc-下载福彩选号助手| www.qp48.com-民政局福彩中心待遇| www.021282.com-腾讯分分彩官网结果| www.047740.com-淘彩票合法吗| www.hs56.com-竞彩之家app| www.277156.com-河南彩色水泥板| www.076111.com-褔建体彩31选7| www.183103.com-体彩网即时比分| www.267716.com-三分快三开奖结果| www.337566.cc-体彩查询中奖| www.409024.com-划归七星彩-| www.561877.com-免费彩金领取38| www.698140.com-浙江体彩顶呱刮| www.300086.cc-快三分布图图表示| www.54if.com-精彩分享平台| www.588257.com-海南省七星彩局王| www.661227.com-中国彩票第一狂人| www.736361.com-保定福彩中心在哪里| www.804808.com-时时彩开奖软件安卓| www.873956.com-山西福彩网官方首页| www.865878.com-腾讯彩票手机版| www.963619.com-手机买彩票赚钱| 天下彩www.403770.com| www.723021.com-至尊彩-app中心| www.871492.com-汇彩网挣钱靠谱吗| www.79ft.com-彩票性缘目录| www.313095.com-福利彩票任三怎么玩| www.428255.com-金手指足彩缩水公式| www.8131.net-福利彩票星期几有| www.2775.wang-彩02彩票客户端| www.630029.com-三d彩票玩法| www.734511.com-排3最准凤彩网| www.860458.com-天天彩票下载到手机| www.946411.com-彩钢围挡安装图片| 吉利彩票www.66376g.com| www.u18.in-下载旺彩彩票软件| www.292376.com-体彩广西11选5| www.528687.com-福彩双色球竞技风暴| www.665784.com-福彩初几开始卖| www.773081.com-新注册送彩金游戏| www.67ng.com-彩漂粉的使用方法| www.6867.net-海南飞鱼彩票代理| www.633750.com-腾讯分分彩对码选胆| www.760537.com-快彩乐官网下载| www.983320.com-上海体彩兑奖地方| www.pl78.com-彩钢板-| www.ov63.com-最近彩票诈骗案| www.336870.com-江苏快三查询走势图| www.26953.com-乐彩网玄机图p3| www.82479.com-福彩3d打黑两码| www.050472.com-河南幸运彩开奖当天| www.151721.com-彩票几组数字| www.n26.org-掌上京彩官方下载| www.61190.com-下载最多的购彩平台| www.444751.com-上海松江彩票中奖| www.617760.com-拉菲时时彩app| www.714305.com-福彩3的-| www.109362.com-金利彩票能玩吗| www.308715.com-彩票购买投注大厅| www.458156.com-福彩试机号千禧金码| www.624677.com-妖气网彩色本子| www.297235.com-乐购彩票是真是假| www.176032.com-一分快三稳中计划| www.088878.cc-买快三的官方平台| www.129463.com-众彩彩票怎么注册| www.046455.com-51彩虹手机下载| www.137989.com-577彩票计划| www.849998.com-上海彩票中奖| www.934935.com-福彩机连接电视口| www.993055.com-360彩票新快3| www.zk3.com-广西快彩-| www.ry91.com-彩票256软件| www.w40.top-今天体彩七星彩开奖| www.62mm.com-福彩选四开奖| www.0351.com-助赢彩票软件官网| www.125082.com-给中国福彩中心留言| www.318.tv-华彩彩票软件| www.776515.com-快乐彩技巧论坛| www.sf40.com-七乐彩今天开奖号| www.44tu.cc-旋风彩虹机视频| www.jq48.com-分分彩害得我好惨| www.613844.com-网上买的彩票可靠吗| www.281626.com-彩票预测号码| www.971750.com-创彩网是个什么| www.287318.com-全国彩票开奖情况| www.085375.com-大发彩票官方版| www.982802.com-湖南福彩网网| www.dk75.com-基诺型彩票玩法技巧| www.ww27.com-湖北快三查询结果| www.628237.com-彩票输了一千多万| www.019795.com-福彩群英会20号| www.779037.com-福彩3d正版大花猫| www.9640.tv-亿彩彩票怎么样| www.810372.com-福利彩票最近开奖| www.922345.com-足球竞彩分析师招聘| www.975123.com-体彩大乐透前2后1| www.ft84.com-天天快三软件下载| www.tp.cc-中国竞彩网比分| www.42426.cc-彩宝贝手机app| www.963669.com-买足球彩票规则| www.kz3.cc-一分快三走势怎么看| www.76.me-六冠彩票是什么平台| www.3560.pw-糖果派对掉彩金图片| www.22658.cc-彩票店转让注意事项| www.291781.com-快三计划单双| www.447886.com-福彩梁博说彩今天| www.505820.com-时时彩开户送体验金| www.625770.com-三分彩官网平台| www.866938.com-即开型彩票常识| www.989972.com-彩漂去霉-| www.za63.com-体彩5d开奖走势图| www.51es.cc-体彩足彩九场玩法| www.48uv.com-香港好彩票网站| www.4121.tv-7彩应用商店下载| www.586829.com-老版彩吧助手| www.746974.com-星彩网下载-| www.218535.com-天天彩票网-| www.63vy.com-福彩彩票开机号| www.688805.com-鸿鼎彩票平台| www.567303.com-苹果手机彩膜黑色| www.633202.com-众乐彩大发-|