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天

知道了
1分快三 www.940522.com-一分钟开奖是黑彩吗| www.er27.com-乐彩网app官网| www.11eu.com-黄金时时彩计划王| www.96yv.com-辽宁快乐十二爰彩乐| www.4676.xyz-两块钱一注的彩票| www.390853.com-彩票账号注册| www.811544.com-亿乐彩官方登录网站| www.920973.com-福彩双色球网上购买| www.986710.com-竞彩蓝球计算器| www.as85.com-湖北精彩十分怎么玩| www.327344.com-今日体育彩票| www.103223.com-风彩彩票-| www.896789.com-彩票自动投注脚本| www.022629.com-重庆时彩时彩| www.720711.cc-七星彩2元中多少钱| www.0222.biz-为什么玩彩乐老是输| www.1851.cm-彩民十阳光探吗图| www.46318.com-75秒时时彩下载| www.019856.com-今天体育时时彩开奖| www.754428.com-特彩4949-| www.952254.com-世界三大博彩| www.77yi.com-非法卖足彩-| www.7267.loan-彩虹六号大神的键位| www.077222.cc-旺财彩票网址| www.cm33.com-老彩票平台-| www.932271.com-下载荣博彩票| www.345075.com-手游彩票软件| www.501977.com-十大正规的彩票软件| www.678168.com-乐彩板论坛-| www.817086.com-国外彩票官网| www.56873.cc-唐龙说彩今日| www.068358.com-彩神通官方网| www.185674.com-我国福彩事业的宗旨| www.301326.com-福彩三d出号走势图| www.914211.com-体彩大乐透11选五| 奔驰彩票www.750966.com| www.562907.com-彩伞-| www.659057.com-彩票开奖七星彩排五| www.811686.com-重庆体彩中心官网| www.901701.com-中国体彩彩吧试机号| www.ck2.com-快三如何玩中奖率高| www.789800.com-竞彩足球的庄家是谁| www.035986.com-五分时时彩相关软件| www.279173.com-福彩3d讨论专区| www.914999.com-实时彩票犯法吗| www.19019.com-海南私彩注册网站| www.93578.com-杭州彩色包装箱厂| www.35727.cc-竞彩店转让-| www.072213.com-秒速时时彩财神| www.234105.com-银川体彩中心地址| www.503226.com-鸿彩真的假的| www.334416.com-开彩-| www.47377.com-好彩快3官网| www.209218.com-体彩大乐开奖查询| www.397017.com-新生彩票官网| www.568121.com-彩票计划公式赚钱| www.507250.com-乐彩网大乐透净版| www.8749.loan-远途国际彩票可靠吗| www.44412.com-广州体育彩任五开奖| www.72593.com-网上申请开彩票站| www.249460.com-刮刮乐彩票app| www.3953.cc-彩票之家免费资大全| www.09474.com-彩29网站下载| www.62417.cc-中国贵宾室彩票| www.bz29.com-c81彩票官网| www.tq90.com-安徽快三正规吗| www.953052.com-广东福彩好彩36| 爱购彩票www.473552.com| www.jh98.cc-发彩网网址是什么| www.73850.com-怎么买世界杯彩票| www.065986.com-中华福利彩票代理| www.049055.com-精英彩票登录| www.760442.com-网上时时彩能提现吗| www.025127.com-彩票怎么投注最稳| www.106812.com-瑞彩祥云官方下载| www.190336.com-快三开奖有规律吗| www.294433.com-彩牛彩票客服端| www.378990.com-彩票开奖查询排列7| www.518781.com-彩票五行取数法| www.628944.com-彩票开奘查-| www.65bu.com-今日老谢说彩| www.866444.com-体彩481怎么玩的| www.986634.com-本期足彩310预测| www.ap21.com-福彩助手绑定站点| www.pp53.com-时时乐今天快三| www.6233.pw-十分钟彩票开奖结果| www.17568.cc-如何算彩票中奖机会| www.59273.cc-福利彩票网点申请| www.76747.com-足球竞彩赛事直播| www.065558.com-彩票举报平台登录| www.456600.com-时时彩最新杀号方法| www.328722.com-彩运网手机版客户端| www.1851.cm-彩民十阳光探吗图| www.106869.com-七号彩票下载安装| www.298575.com-qq彩票网页版| www.216539.com-天马彩票天一团队| www.337571.com-彩金平台-| www.307679.com-派彩是负的是啥意思| www.094333.com-3地彩票-| www.221384.com-手机123彩票网| www.22003.cc-558赢彩能信吗| www.373892.com-鸿狼彩票骗人的吗| www.529539.com-彩票套利团队| www.639351.com-济南体彩店转让| www.603212.com-福建体彩官方中心| www.863393.com-完整比分彩客网| 彩71www.005845.com| www.144965.com-福彩时时乐官网| www.837.pw-七星彩铁公鸡下载| www.516363.com-网上体彩怎么买| www.754513.com-中彩网双色球搞台赛| www.959184.com-手机58彩票网| www.wb68.cc-人人中彩新版| www.1187.vip-吉林快三开奖查询| www.hq99.com-好彩客app-| www.45ga.com-东莞体彩网唯一官网| www.192163.com-爱彩乐11选5上海| www.883340.com-快彩在线是不是赌博| www.163013.com-好彩运大发快3| www.185056.com-下载彩票软件大全| www.365229.com-湖北快三加奖取消| www.886443.com-90在线九龙彩票| www.951446.com-澳客竞彩足球| www.995872.com-怎么举报好彩店彩票| www.bq48.com-彩71下载网址| www.qv72.com-湖北快三有假吗| www.5681.wang-龙胜彩票投注站| 吉利彩票www.66376f.com| www.886257.com-数字彩票的原理| www.cp2668.com-福彩快三口诀表| www.80yj.com-体育彩票场次| www.834503.com-高空彩烟价格| www.988319.com-3d购彩小贴士| www.67ld.com-三地新彩网字谜| www.042002.com-国外有没有五分彩票| www.788467.com-众彩网七星彩顶测| www.150980.com-乐彩彩票怎么登录| www.811727.com-七乐彩四拖六多少钱| www.wr10.com-人人中彩票怎么样| www.019962.com-贵州省体彩助理| www.39399.com-全民中彩提款| www.037620.com-9cb彩计划-| www.602548.com-福利彩票利润多少| www.584483.com-外围彩票app下载| www.766675.com-时时彩k线图手机版| www.124277.com-1分快三计划工式| www.hj77.com-大发快三诀窍| www.879703.com-481体彩开奖结果| www.cp6322.com-福彩手机投注客户端| 奔驰彩票www.750966.com| www.608208.com-彩友会公正-| www.035308.com-腾讯官网竞彩足球| www.2188.cm-下彩彩票不让提现了| www.17669.cc-什么是爱彩乐| www.960456.com-竞彩宝下载链接| www.22wh.com-怎样领福彩一等奖| www.18831.com-搜索广西体彩网| www.311967.com-甘肃省体彩兑奖中心| www.432788.com-彩合开奖-| www.182706.com-老快三平台-| www.713221.com-安卓手机福彩网| www.63an.com-体育彩票怎么查中奖| www.567593.com-双色球乐彩网| www.368803.com-越南高频彩票5分彩|