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.778505.com-下载升级版网易彩票| www.865420.com-体彩票开奖结果查询| www.999889.cc-福彩3d黑龙字谜| www.il24.com-福利彩票3d交流群| www.08rd.com-炫乐彩票安卓版下载| www.91pn.com-悟空彩票进不去| www.5306.com-大发云至诚彩票被黑| www.847521.com-规划彩票-| www.2yr.com-黑彩票平台出黑| www.709279.com-台湾时时彩结果查询| www.888641.com-互联网彩票2018| www.969596.com-体育篮球竞彩网首页| www.wf20.com-体彩排3今天开奖| www.1933.net-体彩实体店行业赚钱| www.923193.com-彩票店怎么加盟电话| 网易彩票www.069wy.com| www.363033.com-网上购彩恢复| www.475006.com-汇辰彩票28558| www.478321.com-彩票兑奖app| www.662760.com-新时代彩票手机版| www.295999.com-甘肃快三规律破解| www.zq37.com-七彩视界app下载| 九五彩票www.95222w.com| www.216520.com-七星彩开奖走势图| www.705038.com-七星彩网投源码程序| www.951063.com-武汉休闲快三第一套| www.js80.cc-荷兰五分彩走势图| www.780726.com-彩铅手绘花朵| www.887308.com-盈发彩票是不是骗局| www.963649.com-vr彩票平台官网| www.th35.com-正彩彩票网站| www.005597.com-竞彩提前多久封盘| www.95015.com-刷福彩流水可靠吗| www.090810.com-重庆彩票网官网开奖| www.3333.bid-汇彩网app官方网| www.874664.com-大同彩票-| www.138593.com-有多少人玩鸿彩| www.34625.com-神彩福牛网2019| www.742125.com-我要下载体彩和福彩| www.855850.com-七乐彩复式计算表| www.949664.com-福彩三天必出胆码| 8k彩票www.803244.com| www.549450.com-彩票平台刷流水单| www.577003.com-玩彩神8输了三十万| www.959920.com-时时彩长龙有多长| www.bj75.com-菲律宾幸运彩票平台| www.452721.com-竞彩2中一-| www.578585.com-779木漫画全彩| www.ee84.com-快三怎么刷流水不亏| www.hk79.com-体彩足球玩法介绍| www.575276.com-时时彩平台能改单吗| www.688043.com-彩票杀龙是什么意思| www.ve48.com-和彩-| www.258850.com-雪缘园足彩胜负彩| www.339796.com-唐山彩票站转让| www.422270.com-中国移动彩铃设置| www.la61.com-福彩通-| www.315190.com-彩票分析软件排行榜| www.831385.com-年会发彩票-| www.963192.com-进球彩开奖-| www.cp0958.com-快三彩票破解软件| www.yk33.com-体彩十一选五| www.hk34.com-网络彩票平台合法吗| www.71qz.com-恒彩88地址-| www.678788.com-刷彩网赚是怎么回事| www.67618.com-679.com彩票| www.7626.wang-k彩平台是黑台吗| www.062191.com-万彩网能提现吗| www.259084.cc-竞彩足球购彩大厅| www.424417.com-万金集团彩票app| www.781841.com-湖北十一选五彩票| 星际www.930xj.com| www.d14.com-91彩票官网-| www.96sw.com-彩票要每天提现吗| www.187005.com-快三复式彩票怎么玩| www.333108.cc-彩票怎么看号| www.0730.site-十大彩票巨奖得主| www.11382.cc-788彩钢板板型| www.96794.com-湖南假彩票案| www.141983.com-微信高频彩是什么| www.86zt.com-七彩乐中奖结果| www.38615.cc-环彩网下载-| www.021128.com-大乐透彩票中奖查询| www.155143.com-传统足彩任九怎么玩| www.293675.com-体彩蓝琪儿今日断组| www.421888.com-香港高彩网-| www.358289.com-新浪彩票3g版| www.11705.com-进入福彩门户| www.573852.com-世界研究彩票牛人| www.823679.com-印花彩涂铝板| www.lv5.cc-代玩彩票50一小时| www.383848.com-三晋福彩网今曰开奖| www.dk71.com-马来西亚彩票平台| www.5985.cc-彩运指彩票走势大全| www.71669.com-福彩3d天天开奖吗| www.9892.in-永恒彩票网站| www.7746.xyz-比特币一分彩计划| www.154567.com-网购体彩-| www.710172.com-大优手机彩票平台| www.869622.com-苹果够力七星彩安装| www.nn46.com-竞彩篮球投注app| www.92og.com-五八彩票-| www.039924.com-江苏彩票七位开奖| www.522045.com-时时彩怎样分辨虎龙| www.839126.com-彩票公众号推荐| www.cp0118.com-大发快三走势图| www.f20.net-马来西亚线上彩票| www.2896.top-彩票一宝贝预倾| www.272356.com-好彩香烟多少钱| www.444554.com-黔东南体彩中心| www.575151.com-怎么买欧洲彩票| www.681549.com-豪彩娱乐官方网站| www.4569.website七乐彩35期预测| www.wa33.com-芜湖快三开奖走势图| www.0335.me-福彩兑奖有效期| www.17209.com-福彩出号走势图| www.041720.com-长龙助手彩票平台| www.1806.xyz-三亿彩票肥城| www.788792.com-310彩票推荐| www.875793.com-买彩票的诗句| www.73yf.com-3d大彩报彩图| www.904563.com-彩票和值大小| www.4184.cn-七彩阳光第七届| www.007377.com-体彩乐五规则| www.027110.com-87彩票店靠谱吗| www.hm48.com-福彩有哪些玩法| www.09bo.com-河内1.5分彩| www.96we.com-休彩排到五开奖| www.5842.xyz-体彩扑克牌豹子| www.72700.cc-精彩片段-| www.108932.com-瓶子彩泥手工| www.230035.com-幸运快三玩法| www.wf29.com-福利彩票开奖号码开| www.20966.cc-彩票app诈骗提醒| www.033699.com-易彩彩票网怎么下载| www.17705.cc-体彩283中奖规则| www.852905.com-手机版彩6-| www.470890.com-台湾5分彩app| www.744561.com-弘升彩票-| www.ld31.com-大彩网网址-| www.61537.com-大大彩票网站下载| www.24808.cc-少儿彩铅画一级| www.015940.com-老版本唯彩会下载| www.178305.com-彩票害死多少人| www.339491.com-湖北快三派彩走势图| www.947974.com-四川体育彩票| www.cai7144.com彩票高手计划app| www.uy61.com-福彩太湖字谜| www.662378.com-七星彩截止销售时间| www.et82.com-北京5分彩开奖记录| www.025.me-福彩三d往期试机号| www.74nj.com-p3体彩今日开奖| www.54150.com-正彩娱平台注册| www.827566.com-世纪佳缘男彩票托| www.33817.com-百分之百中的彩票| www.83166.cc-3d高频彩是真是假| www.052952.com-江苏快三怎么投注| www.536.cn-和彩印怎么设置使用| www.5282.live-七星彩19044| www.10091.com-山东福彩中心下载| www.61159.cc-最新彩票093| www.268077.com-体彩北京11选五| www.399953.com-星期三可以买彩票吗| www.608048.com-河北体彩排列五开奖|