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.220990.com-体彩开奖号码排列五| www.846685.com-彩票黑幂-| www.973634.com-福建体彩彩票| www.ez44.com-速盈彩-| www.9fx.com-体彩四等奖有多少钱| www.706209.com-发彩网大小单双| www.854382.com-时时彩倍投咋样合算| www.971575.com-中国福彩票开奖| www.dg62.com-彩票多少钱-| www.80zp.com-支付宝中体彩| www.401856.com-昨天的开奖号码福彩| www.312977.com-体彩幸运号码| www.861813.com-腾讯时时彩开奖依据| www.307678.com-派彩每日推荐号码| www.444080.com-体育彩票nba玩法| www.543991.com-彩票怎么教我一下| www.546014.com-福利彩票店室内设计| www.678500.cc-彩之网首-| www.yi51.com-万能大发快三辅助器| www.906375.com-彩票系统官方| www.3477.site-中利彩票app| www.61dd.com-体彩排三多邦预测| www.r11.shop-体彩买一注多少钱| www.964124.com-91彩票人工计划| www.i17.bid-湖北快三查询| www.621308.com-红旗彩票能玩吗| www.854491.com-爱彩福乐安徽快三| www.14ui.com-体彩第18143期| www.716103.com-大发彩票坑人么| www.804589.com-博彩源码交易平台| www.882732.com-上海基诺彩票奖项| www.952454.com-k彩富民福地测登录| 环球彩票www.100v.cc| www.87ys.cc-彩票009app-| www.902661.com-亚洲会彩票安不安全| www.979425.com-彩票7位数开奖结果| www.gv81.com-新彩票-| www.713095.com-怎么下九州彩票| www.806644.com-3d乐彩-| www.877544.com-打开彩票开奖| www.972714.com-彩铅初学-| 五彩堂www.898463.com| www.657876.com-百宝彩票双色球| www.173176.com-体彩5排开奖号码| www.026115.com-哪些是黑彩票网站| www.459308.com-中国济宁福利彩票网| www.8ti.com-分分彩票app大全| www.761074.com-结婚彩礼钱归谁所有| www.970451.com-彩票多久开一次奖| www.r16.pw-大发快三大小| www.49904.com-足彩下载什么软件| www.966780.com-彩票一撕为二能兑奖| www.731910.com-彩色压印地坪批发商| www.954147.com-美税无嘴骆驼和好彩| 彩票5www.550414.com| www.706705.com-卓易彩票老版本| www.800316.com-彩20彩票投注| www.881674.com-佰万彩票是骗局吗| www.959425.cc-3d彩吧图库冫| 500彩票www.647977.com| www.362715.com-买彩票的人少了| www.658764.com-买彩票要写几个号码| www.214941.cc-4亿彩票官网| www.605732.com-吉祥彩05005| www.807215.com-温州彩票站转让信息| 多乐彩票www.817474.com| www.pm53.com-3d彩乐乐-| www.532963.com-七星彩j几点开奖| www.6514.cn-体彩即开彩票返点| www.84ue.com-2016体彩-| www.850363.com-快三摇骰子技巧| www.3757.cn-彩帝彩票是规网站吗| www.876939.com-数字型彩票玩法介绍| www.947673.com-马云阿里巴巴彩票| www.58967.cc-福彩排列三预测| www.168111.com-宁夏快三基本走势图| www.433904.com-投注福利彩票技巧| www.957743.com-095彩票-| www.zn25.com-唯彩看球-| www.830213.com-微信快乐彩是诈骗吗| www.939735.com-众盈娱乐五分快三| 金彩www.983jc.com| www.rf76.com-168彩票苹果版| www.17hm.com-中国福彩报手机版| www.194681.com-河北体彩排三走势图| www.461884.com-3d黑彩网专家预测| www.053700.com-网络足彩-| www.200313.com-体彩排列3开奖查询| www.235872.com-500足彩-| www.424442.com-彩票充值不到账| www.590330.com-彩金和黄金哪个保值| www.675521.com-彩票了刀开机号| www.413734.com-博彩是干什么的| www.575411.com-美国最近彩票大奖| www.660371.com-网上分分彩投注规律| 幸运彩票网www.33598u.com| www.322351.com-正规网购彩票网站| www.397217.com-分分彩做号技巧| www.165327.com-1068彩票登录| www.883061.com-678彩票网安全吗| www.957324.com-香港老彩民高手| 金凤凰彩票www.404677.com| www.kh98.com-快三秒加盟方法| www.13os.com-福彩3d中国胆王| www.345955.com-云购彩票注册邀请码| www.265740.com-l浙江福彩-| www.294610.com-彩票源码3端| www.935858.com-网上买彩票买最正规| www.992131.com-中国足彩在线网站| www.de43.com-买体育彩票几位数| www.tp97.com-安徽快三是违法吗| www.006239.com-柬埔寨一分彩开奖| www.583903.com-富鱼网触屏版彩票| www.731496.com-易彩集团注册邀请码| www.121094.com-qq群老师带玩彩票| 网易彩票www.07163t.com| www.gp8.com-彩票数据中心快3| www.040867.com-竞彩篮球看盘技巧| www.40755.com-中彩网高手三肖| www.565697.com-i中国彩吧论坛首页| www.883445.com-彩票软件计划群| www.kz93.com-购彩软件哪个好用| www.10qf.com-吉林快三每天几期| www.0364.com-彩娃app3.5-| www.055385.com-网络江西快三| www.603772.com-粉彩瓷器瓶-| www.1349.cn-下期七星彩开奖结果| www.576046.com-福彩3d跨度和振幅| www.656454.com-k彩线路测试| www.312930.com-分分彩4期必中| www.397194.com-v9彩-| www.17zu.com-体彩大乐透历史同期| www.722793.com-双赢彩票网址是哪个| www.847506.com-古建筑戏台彩绘| www.82153.com-区块链彩票项目| www.05pe.com-富鱼网彩票是真的吗| www.985505.com-时时彩组三组六平刷| www.99sr.com-梦想彩票合法吗| www.3338.vip-蒙氏彩色圆柱体教案| www.0534.date-彩尊app归谁管| www.110062.com-连中彩票ios| www.94ud.com-捷报网足彩亚盘推荐| www.28148.com-福彩各种玩法开奖| www.117501.com-足彩票比分500| www.364234.com-彩虹日记100字| www.94jo.com-棒棒彩票的介绍| www.9980.xyz-福彩3d小军第一版| www.cp199.com-湖北精彩十分开奖结| www.957412.com-北京体彩一定牛| www.cp234.com-全天一分快三计划| www.jq96.com-彩神大发快三app| www.790989.com-彩宝网双色球开机号| www.422148.com-乐乐彩票是什么意思| www.101.space-利彩365团队| www.0104.com-带彩字网名-| www.7315.cn-大师彩铅插画| www.46674.com-时时彩胆码免费计划| www.53882.com-体彩竞猜网-| www.134776.com-彩票白菜送彩金| www.if96.com-福彩3d杀尾大全| www.463875.com-天狼星七星彩预测| www.1nm.cc-体彩几率-| www.523106.com-乐和彩票苹果版| www.262818.com-湖南福彩总部电话|