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天

知道了
9彩注册 www.003002.com-彩票3d之家首页| www.357744.com-羊城晚报今日好彩版| www.re9.com-吉林快三什么意思| www.2674.cc-哪儿有平台买体彩| www.290606.com-彩宝是不是骗局| www.18088.com-3位数的彩票怎么买| www.38in.com-彩铅脸部上色技巧| www.466559.com-彩票软件大全ios| www.684005.com-彩票46app-| www.766677.com-全民彩票1-| www.957500.com-七星彩一注-| www.vi24.com-广西快三遗漏一定牛| www.731525.com-网址导航足彩| www.679508.com-二元彩票网3d| www.779749.com-七乐彩11中4十0| www.886728.com-博彩推广怎么拉人| www.969594.com-酷彩吧安全-| www.bw92.com-安徽快三二同号遗漏| www.zr19.com-大玩家彩票5万| www.056944.com-哪个体育彩票软件好| www.243518.com-爱乐透彩票老版本| www.ce35.com-大发快三是国家的吗| www.002152.com-七乐彩怎么样算中奖| www.07635.com-贵港彩票下载| www.304678.com-福利彩票第35期| www.457444.com-恒彩下载-| 快彩网www.378017.com| www.658621.com-受彩乐-| www.655923.com-湖北彩妆培训学校| www.495752.com-8816彩票平台| www.664527.com-七乐彩开奖对比器| www.of98.com-中国体彩网大乐透| www.70zk.com-彩票3d图谜-| www.99412.com-玩彩老手双色球专栏| www.092172.com-体彩论坛网-| www.258505.com-彩票计划网页版| www.916655.com-菠萝彩软件下载| www.ai36.com-昨日彩票号-| www.088690.com-福彩通是真是假| www.6891.biz-好彩一几时开奖| www.287925.com-优彩网举报客服| www.4627.biz-5a彩票网合法吗| www.ju55.cc-彩库宝典苹果| www.931509.com-买彩票怎样才能中奖| www.z94.top-明彩影视-| 大赢家彩票平台www.978261.com| www.jg24.com-江苏e球彩-| www.e32.cn-彩票今日开奖| www.73205.com-盈丰彩票app| www.350381.com-手机彩膜制作软件| www.912283.com-网上买彩票会不会抓| www.996245.com-竞彩足彩篮球源码| www.362987.com-彩票真实的吗| www.8149.cc-爱彩彩票网上网导航| www.494933.com-龙江体彩快十分开奖| www.692183.com-彩票小助手计划方案| www.811057.com-以彩开头的成语| www.980331.com-成功彩票网-| www.7rg.com-中了彩票让父母领| www.3038.vip-快彩网中奖助手下载| www.xg06.com-好彩客下载送18元| www.85fv.com-天天彩4中奖介绍| www.6551.cc-福彩三地今日试机号| www.50093.cc-cai彩票-| www.0416.cc-好运快三遗漏值| www.029645.com-彩神熊掌号-| www.782556.com-网易彩票网真实吗| 超级彩票www.901833.com| www.637070.com-小米彩虹电池怎么样| www.779909.com-七乐彩在线购买| www.456304.com-红菜苔彩票公司电话| www.md79.com-福彩十分开奖结果| www.88096.com-彩1彩票苹果| www.685805.com-银彩通-| www.806018.com-万达彩票3d八码| www.924934.com-凤凰彩票官网注册| 亿彩堂www.87668l.com| www.108038.com-正规的彩票网站排行| www.356190.com-如何用数学算彩票| www.500971.com-美丽的彩色画| www.588281.com-七星彩最准的头尾| www.664527.com-七乐彩开奖对比器| www.787225.com-彩经网时时彩走势图| www.924985.com-湖北快三网-| www.hj3.com-内蒙古今日快三| www.vz67.com-借ip地址代玩彩票| www.o35.biz-彩宝贝彩票开奖查询| www.70kn.com-南京名彩堂画材| www.395953.com-竞彩大神免费推荐群| www.177774.com-北京福彩官网| www.257289.com-江苏快三开奖规则| www.330193.com-体育彩票有哪些玩法| www.421144.com-赛车牛牛是什么彩票| www.529909.com-东方彩彩票-| www.7292.pw-彩虹频道直播源| www.848657.com-竞彩足球让球对阵表| www.949091.com-高频彩开奖网站| 全民乐彩票www.2934y.com| www.697037.com-中体彩运营-| www.29045.com-彩名堂彩票软件下载| www.78fm.com-福彩机器-| www.v12.org-恶搞彩票中奖编辑器| www.79ag.com-时时彩二十分钟一期| www.6015.cm-购彩信誉平台排名| www.545828.com-彩票平台和计划员| www.53as.com-家家好彩报纸图| www.802.club-彩票六壬-| www.370013.com-福彩3d开奖| www.778574.com-8彩票网址-| www.b31.vip-01彩票正规吗| www.51ch.com-最好的足彩缩水| www.173460.com-网上买彩票会坐牢吗| www.195741.com-湖北快三怎么玩稳赚| www.638887.com-800万彩票网| www.365314.cc-98时时彩平台登录| 9928彩票www.9928o.com| www.751062.com-福网彩app下载| www.2521.cc-什么叫体彩-| www.244856.com-快三倍投计划| www.896488.com-广西彩票未领奖| www.53799.com-五分快三的软件挂| www.113244.com-体彩助手二维码下载| www.592308.com-彩票软件注册彩金| www.697750.com-彩票大赢家网| www.121705.com-哪个平台有河南快三| www.655696.com-彩票单式生成| www.x77.xyz-武汉体彩-| www.591071.com-沙巴博彩公司官网| www.736582.com-电话怎么投注彩票| www.868103.com-星期三那个彩票开奖| www.937742.com-幸运快三谁被骗过| www.562196.com-爱中彩票app苹果| www.639750.com-牛牛彩票下载| www.027229.com-中福快三作弊器| www.04030.com-微彩吧兼职是骗局| www.626308.com-9号彩票是骗局吗| www.713116.com-亿彩票是正规网站吗| www.797715.com-3d字迷新彩吧| www.869876.com-今天的3d福彩图纸| www.918853.com-香港巨额彩票要交税| www.970829.com-迷彩免手机影视网| 福彩网www.60007y.com| www.775947.com-时时彩后三最稳玩法| www.5159.biz-韩国彩票开奖时间| www.5025.vip-吉祥彩票c5005| www.947124.com-怎么玩快频彩票| www.565861.com-足彩半球盘解析| www.566927.com-青岛福利彩票中心| www.7757.net-九千万彩票是真的吗| www.143468.com-好彩店彩票官网| www.254434.com-广东福彩快-| www.687206.com-投福彩-| www.10mv.com-云南体彩3d走势| www.01ji.com-彩虹产生的原因| www.78677.com-乐彩论坛1-| www.47oe.com-网上去哪买彩票| www.55994.cc-快三怎么选号| www.023161.com-体育彩票基诺游戏| www.68166.com-高频彩开奖结果查询| www.046770.com-福彩开店有什么要求| www.477335.com-湖北福彩返点| www.550624.com-什么彩票能中一千万| www.625331.com-体彩有哪些即开彩票| www.679838.com-酷彩吧试玩-|