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天

知道了
彩票123现在叫什么名字 www.881581.com-查处违规网络售彩| www.jw17.com-彩客彩票官网| www.950937.com-微彩娱乐下载安装| www.mx52.com-天天福彩下载| www.99go.com-今日竟彩结果| www.830366.com-哪个软件能查彩票| www.947582.com-足彩微信公众号排名| 红旗彩票www.39957g.com| www.op13.com-彩票361登陆| www.238703.com-北京28彩票合法吗| www.877842.com-南京福彩中心学堂| www.923954.com-福彩定位杀号技巧| www.305012.com-7星彩19027-| www.377990.com-彩礼100万的有吗| www.330200.cc-无需申请送56彩金| www.526503.com-时时彩后二复式组选| www.664491.com-福彩七乐彩奖金分配| www.830144.com-盈彩彩票是真的假的| www.950759.com-体彩三天必出计划| www.wc6.cc-彩宝彩票下载| www.509717.com-留里彩票-| www.58466.cc-8号彩票幸运飞艇| www.773094.com-微彩吧赚钱是真的吗| www.76698.cc-机选800注彩票| www.53kn.com-10年买彩一场空| www.2538.club-直播彩播啥意思| www.09312.com-广东福彩app| www.94693.com-河南481乐彩网| www.070836.com-3168彩票-| www.998264.com-广州福彩网官网| www.tf83.com-快三怎么看跨度| www.0385.com-跳快三的歌曲| www.05430.com-那个平台可以买彩票| www.214822.com-41亿彩票-| www.079400.com-1980彩票平台| www.934594.com-天天赢彩票登录| www.869307.com-够力表七星彩下载| www.958438.com-今晚七星彩直播现场| 500彩票www.202434.com| www.mn98.com-翻本彩金彩票网站| www.97rm.com-博友彩5分-| www.260310.com-大发快三团队计划| www.326748.com-美国昨天彩票出奖| www.377082.com-博恩彩之堂下载| www.600740.com-彩票导航路线| www.24405.com-快三2倍中奖多少钱| www.358955.com-彩票开奖随机选号| www.45143.com-彩薇花化妆品| www.611689.com-支付宝福彩缴款通| www.706322.com-优乐时时彩平台| www.809755.com-手机上买彩票违法吗| www.937050.com-彩福网app下载| www.1527.cn-爱彩网下载-| www.851182.com-时时彩qq报号群| www.999797.cc-香港彩民网-| www.is86.com-体彩61中奖规则| www.946354.com-送彩金彩票软件下载| www.ia61.com-彩票容错什么意思| www.8187.in-炫彩彩票靠谱吗| www.766623.com-彩乐糖果招聘| www.874999.com-皇冠投彩-| www.959005.com-彩民版app靠谱吗| www.cp504.com-快三下载-| www.qp72.com-时时彩群号-| www.27je.com-谁想彩票坐庄| www.278.cm-大牌彩妆加盟| www.4693.org-也买彩是黑彩吗| www.11968.cc-足球竞彩完场比分| www.as17.com-贵州彩票手机投注| www.ue92.com-彩票属于赌博| www.9kb.cc-七星彩私彩大奖网站| www.6677.me-王山打鸟彩调| www.98xg.com-竞彩足球5串6算法| www.328730.com-下彩网触屏版彩票| www.434401.com-福彩3d3d村杀号| www.538738.com-乐彩vlp众乐| www.618483.com-新浪彩票大乐透预测| www.712937.com-cp彩票网站-| www.800899.com-体育彩票中奖地查询| www.736203.com-无极时时彩票| www.908071.com-俄罗斯1分彩的计划| 网易彩票www.07163d.com| www.395959.com-清明彩票放假| www.990456.cc-怎么注册汇彩网| www.gf53.com-湖北彩票假球案| www.c27.com-时时彩单机计算软件| www.22rv.com-湖北七星彩开奖结果| www.154051.com-快三开奖走势图图片| www.254513.com-好彩官方下载| www.121275.com-霸气彩票店名| www.83553.com-彩票分析软件app| www.069750.com-彩票跨度怎么分析| www.572470.com-福利彩票出奖号| www.47qh.com-体彩大乐透怎样对奖| www.690345.com-310足彩星象图| www.793538.com-彩票平台报警经历| www.17150.com-新e乐时时彩平台| www.503638.com-快三群主黑彩| www.628060.com-广东体彩下载软件| www.90217.com-财富赢家七彩图| www.782815.com-福彩鬼六字谜| www.887669.cc-彩票推广网站| www.971252.com-福彩刮刮卡怎么玩| www.cai208.com-内蒙快三开奖| www.ks89.com-湖南福利彩票3d| www.t87.com-时彩族更新后的网址| www.443221.com-家彩网胆码天中图库| www.332761.com-京彩app哪里下载| www.480054.com-购乐彩网-| www.127031.com-福彩p62开奖查询| www.65956.cc-福利彩票随机号码| www.328688.com-新版的精英彩票| www.462960.com-全民彩苹果版| www.556771.com-正版澳门老鼠彩报| www.11575.com-新浪爱彩足球| www.021277.com-华彩快三网真的假的| www.330773.com-购乐彩票app| www.0jq.com-彩599-| www.116953.com-竟彩足球开奖结果| www.83yp.com-体彩分类-| www.523946.com-七乐彩有app吗| www.032477.com-快三赔率-| www.137989.com-577彩票计划| www.262593.com-湖南福彩-| www.429017.com-轩彩登陆-| www.576996.com-彩票平台升级维护| www.699619.com-微信快三托-| www.vj39.com-天天送彩票-| www.95wk.com-c彩-| www.8122.top-怎么买海南私彩| www.569605.com-好彩娱乐重庆时时彩| www.380062.com-玩彩精灵专家专栏| www.528186.com-e球彩多少期| www.634442.com-电玩8彩票网站| www.759224.com-七乐彩对几个号有奖| www.196892.com-体彩开奖号直播现场| www.964034.com-福彩百位振幅| www.4632.cc-体彩店买福彩吗| www.213805.com-108彩票app-| www.20720.cc-360竞彩足彩| www.58268.cc-彩乐园1??-| www.982388.com-香港时时彩开奖号码| www.il53.com-山东彩友沙龙论坛| www.e14.loan-怎么下载博彩app| www.25be.com-凤城十路有彩票店| www.953213.com-彩票118平台| www.jq0.com-福彩快三遗漏| www.un73.com-新2彩票app下载| www.b83.in-福彩佣金-| www.696795.com-彩客竞彩网-| www.553134.com-网彩计划员-| www.748834.com-中彩彩票亏了| www.840055.com-官方快三彩票| www.230458.com-中国福彩3d新彩网| www.519715.com-256彩票官方| www.630583.com-竞彩足彩500赛果| www.766425.com-竞彩足球怎么买不了| www.850316.com-腾讯分分彩近五百期| www.951724.com-幸运快三计划下载| www.cp0102.com-一分快三在哪里下载| www.0956.cc-cp544快三计划| www.807607.com-福利彩票收藏| www.2599.cc-君乐购彩-| www.755185.com-乐点快三是不是假的|