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.84dm.com-极速快车彩票官网| www.170440.com-吉林快三值和走势图| www.280088.com-时时彩在线预测器| www.365371.cc-v8彩票app官网| www.cp758.cc-一分快三平台下载| www.221827.com-乐点快三-| www.376684.com-彩票双色球历史开奖| www.33vf.com-点击彩是假的吗| www.294187.com-广西快三遗漏一定牛| www.417362.com-彩票店转让风险| www.817317.com-8号彩票是马云的吗| www.1374.cm-漫威水彩抽象画| www.d39.xyz-彩票中奖号查询| www.67ot.com-彩光祛斑会有疤吗| www.6720.org-彩易网3b预测分析| www.906505.com-跟彩票有关的成语| www.yf1.com-贵州福彩下载安装| www.1wb.com-福彩门户安全…| www.220288.com-北京快三路线图| www.829294.com-66网赌彩票-| www.955526.com-01vip彩票官网| www.kq46.com-福利彩票官方专业版| www.47lw.com-四亿彩票网址多少| www.22770.cc-东莞体彩中心地址| www.095239.com-彩票诈骗怎么处理| www.357330.com-中奖彩票赠与父母| www.554578.com-四九彩票资料共享| www.682500.com-足彩微信号-| www.027135.com-英国五分彩靠谱吗| www.234333.com-七星彩的骗局| www.8915.biz-诸暨竞彩大奖| www.102055.com-足彩6串1全包技巧| www.342984.com-神彩奕奕是什么生肖| www.601099.com-胜负彩贴吧-| www.688490.com-彩票七天乐是骗局吗| www.90ik.com-体育彩票进价多少钱| www.51zi.cc-福彩东方六加一开奖| www.71971.cc-999彩票平台网址| www.373797.com-鸿浪彩票-| www.631067.com-趣彩-| www.739015.com-中国福建体彩官方网| www.949673.com-体彩试机号和金码| www.cp2778.com-快三遗漏是什么意思| www.899283.com-83彩票网站-| www.383598.com-重庆微信时时彩群号| www.51233.cc-晓风彩票软件下载| www.027152.com-体育彩票销量下降| www.342399.com-购彩下载-| www.567652.com-竞彩之家代理违法吗| www.801723.com-1086彩票-| www.922229.cc-彩票365软件| www.ei47.com-广西快三一定牛今天| www.121914.com-时时彩导师的骗局| www.881075.com-广西体彩兑奖流程| www.31944.com-易彩堂主页| www.363108.com-福彩快三坑人吗| www.312853.com-最新彩票网站| www.902371.com-彩票天下报纸| www.51582.cc-超级快三是不是真的| www.954851.com-七彩祥云-| www.88876.com-胜负彩18128期| www.235777.com-福彩快三专家推荐号| www.286485.com-中国体彩报下载| www.365174.cc-安徽福彩快3加奖| www.456979.com-江苏快三开出的号码| www.538980.com-必赢福彩-| www.607557.com-高彩钢围挡-| www.669471.com-体彩排五太湖字谜| www.436477.com-查云南体彩30选七| www.68ha.com-酷彩吧下载不了| www.022846.com-彩票天齐网-| www.173013.com-江西快三出奖结果| www.634664.com-七彩音符里的音乐| www.799976.com-附近中国体育彩票店| www.60xv.com-中国福彩3b彩图| www.916559.com-私彩平台大数据| www.984955.com-彩之家论坛资料| www.cx77.com-湖北快三下载| www.rm54.com-彩票店可以买什么| www.r71.cn-今天河北快三推荐| www.971778.com-快捷彩票网是真是假| www.mr00.com-重庆时时彩几点结束| www.22uj.com-合一彩票官方网站| www.4427.cn-爱彩乐网页版登录| www.941325.com-体育彩票七位数唯一| 500彩票www.50024t.com| www.155721.com-微彩在线是骗局吗| www.529721.com-颖彩双色球蓝球专栏| www.608417.com-派彩2o选5走势图| www.a96.cn-北京三分彩开奖号码| www.101176.com-微彩娱乐官网| www.69828.com-彩票软件计划哪个好| www.608690.com-北京足球单场彩票| www.715706.com-手机买彩票要怎么买| www.813576.com-丈夫买足彩赌博欠债| www.892329.com-快乐彩22选1规律| www.970913.com-迷彩兔是哪里的网站| www.gs59.com-好彩爆珠烟蓝莓| www.l98.shop-七乐彩票网是真是假| www.788187.com-19050足彩预测| www.869414.com-7星彩app-| www.937077.com-k彩福地软件载| www.994803.com-好彩客彩票精选版| www.fv37.com-西安福彩宝马案| www.zm78.cc-彩神8注册邀请码| www.by70.com-北京快三下载安装| www.vr43.com-福彩开奖3d中彩网| 亿发彩票www.901527.com| www.9934.cc-彩票3d规律图| www.98299.com-竟彩比分预测| www.078906.com-彩16app-| www.228072.com-2018南阳彩礼| www.90204.com-七彩背景图-| www.114248.com-网上买彩票哪个靠谱| www.271772.com-最新好彩一-| www.463896.com-幸运彩票怎么提现| www.631506.com-海南七星彩人工计划| www.y20.org-体彩排列三遗漏| www.97qi.com-哪些彩票网有送彩金| www.01og.com-易彩快三破解版下载| www.386129.com-江苏体彩7位| www.525967.com-体育七星彩几点停售| www.874167.com-金藏彩群专栏| www.995722.com-足彩奖金比分上限| www.9016.biz-体育彩票主题| www.339272.com-深圳体育彩票中心| www.535949.com-银行购彩-| www.608833.com-最早七星彩-| www.833175.com-76c彩票靠谱吗| www.911862.com-天天彩选3开奖公告| www.15xg.com-加盟体彩-| www.314420.com-彩票中奖规则七星彩| www.381474.com-7星彩号码-| www.067061.com-私彩信誉排行榜| www.890205.com-博彩源码修复教程| www.976949.com-河南西平彩礼多少| www.bp66.com-易彩网下载-| www.583672.com-时时彩走势图| www.bn38.com-038彩票平台| www.903177.com-关于159竞彩足球| www.975034.com-七乐彩杀号定胆专家| www.cp7721.com-广西快三号-| www.mt20.cc-e球彩助手官方下载| www.781754.com-老杨说彩大乐透| www.90028.cc-彩票c6软件下载| www.kc27.com-玩彩票安卓版| www.19533.com-周奖金彩票-| www.73707.com-广州鸣彩公司收费| www.4937.top-t500彩票网-| www.092986.com-彩票预测神器怎么样| www.141848.com-重庆时时彩诈骗套路| www.kp75.com-新浪彩票网手机版| 网易彩票www.080wy.com| www.638595.com-中差色彩构成图片| www.698659.com-好彩客分分快三技巧| www.770746.com-建盏怎么养出七彩光| www.821889.com-5星大底彩票伴侣| www.89499.com-易点彩票手机版| www.y36.hk-033彩票下载| www.54vs.com-怎么短信投注彩票| www.05596.com-义乌体育彩票打彩票| www.56126.cc-七星彩不太好中奖| www.91956.com-广东彩王第32期| www.241556.com-17年七星彩-|