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.451215.com-淘彩票八位邀请码| www.260016.com-宁夏彩票中奖记录| www.09hs.com-福彩3d跨度彩乐乐| www.886566.com-福彩三d字谜叟| www.382282.com-线上体彩是诈骗吗| 大赢家彩票平台www.702572.com| www.7004.me-手机版聚彩jc5| www.775904.com-中富彩票计划网站| www.yj7.cc-皇都彩票用户注册| www.19eh.com-卖私彩被骗-| www.602837.com-捌万彩网-| www.40541.com-彩票机选中奖几率| www.066178.com-买彩票送彩金| www.4435.vip-众亿彩下载-| www.1940.org-3d预测万彩吧| www.828860.com-彩票真实性论坛| www.020437.com-彩c38net-| www.179422.com-杏彩168彩票网| www.105313.com-福彩p62开奖号| www.63zr.com-足彩半全场开奖| www.372150.com-彩票的条形码怎么看| www.635711.com-广西福彩选号器快十| www.526736.com-时时彩翻倍追号| www.688065.com-中国福彩作假| www.918142.com-中奖彩票卖了犯法吗| www.8546.loan-网易彩票11选5| www.176036.com-福彩快三骗局解密| www.cp7928.com-快三组合万能码| www.727308.com-酷彩足球app| www.108802.com-富贵彩平台会黑钱吗| www.cj49.com-易博彩票官方网站| www.yl16.com-网上彩票投注站加盟| 幸运彩票www.73166j.com| www.pr86.com-go彩平台-| www.11om.com-588彩票怎么注册| www.6336.org-梦想彩票网站| www.365105.cc-老快三助手-| www.450670.com-七星彩飞杨头尾规律| www.568826.com-大彩鱼鲸-| www.654908.com-红辣椒七星彩| www.775586.com-365彩票数据平台| www.197976.com-福彩快三输钱感言| www.sj1.com-体育彩票飞鱼攻略| www.595865.com-湖南刘雪龙黑彩视频| www.804828.com-彩票1216app| www.bh92.com-易彩国际骗局| www.566452.com-福彩微投-| www.664219.com-头彩网手机版| www.794305.com-微信腾讯彩票游戏| www.911561.com-家彩论坛手机版| 500彩票www.50026j.com| www.067902.com-如何制作彩票软件| www.br02.com-魔方彩票是真的吗| www.5022.top-福彩杀码村-| www.119402.com-苹果版彩票软件下载| www.250002.com-505彩票链接| www.476258.com-中国福利彩票试机号| www.816437.com-福彩3d昨天的事情| www.935052.com-鑫源彩彩票网地址| www.cai7400.com彩票360官方版| www.410247.com-怎么看福利彩票| www.592313.com-彩票软件送彩| www.710582.com-彩票套现是违法吗| www.854409.com-微信快三公众号| www.956331.com-七星彩开将结果| www.ph78.com-竞彩比分直播360| www.1704.org-福彩缩水过滤工具| www.009724.com-彩一万app-| www.598817.com-天娱彩票靠谱么| www.4578.pw-易彩乐违法吗| www.76044.com-彩票打错单-| www.126876.com-星空彩铅画-| www.072750.com-中国彩票中奖纪录| www.76ce.com-足彩app奖金优化| www.873995.com-福利彩票总部| www.299706.com-123彩彩票网站| www.507723.com-竞彩之家里app| 8号彩票www.81520t.com| www.314518.com-大玩家彩票怎么用| www.024718.com-足球竞彩中大奖| www.281085.com-私彩报警退钱| www.4870.xyz-狼人足彩博客| www.360019.com-海南私彩三字现包码| www.849205.com-香港利民彩计划| www.52vl.com-足彩凯利值计算| www.952981.com-体育彩票网上购买| www.461.pw-七星乐彩票网站| www.39064.com-超神快三全能版| www.869488.com-手机七星彩怎么下单| www.909369.com-诸葛玩彩独胆| www.ti95.com-36o彩票网-| www.080609.com-彩票七乐彩-| www.56315.com-帮买彩票骗局| www.3832.com-17146期足彩| www.050901.com-k彩登录地址| 500万彩票www.35155c.com| www.061110.com-彩票追号可以追几期| www.06997.com-中国福彩版下载安装| www.k14.bid-山西省体彩领奖地址| www.648896.com-岩彩-| www.qo49.com-北京福彩网快3| www.52983.cc-快乐彩票注册| www.539043.com-福彩快三选号技巧| www.9260.org-彩95平台怎么样| www.751244.com-彩票巴巴苹果版下载| www.842757.com-中央彩票公益金官网| www.908930.com-彩票双色球规则| www.975852.com-河南彩礼返还| www.al.com-大发快三官方网站| www.cp7311.com-快三群导师-| www.303732.com-虎扑足彩讨论区| www.3338.date-好用的彩票走势图| www.276629.com-盈彩网什么平台| www.885.online-彩铅唯美古风人物画| www.7509.pw-体彩店老板怎么兑奖| www.22822.cc-彩票网排行-| www.cp4699.com-江苏快三单期计划| www.772882.com-6188彩票安卓| www.010040.com-足球彩票图片| www.802829.com-好盈彩票注册| www.355675.com-微信分分彩娱乐平台| www.466406.com-新加坡快三怎么玩| www.575239.com-网络时时彩被骗| www.658522.com-彩视怎么注册| www.772912.com-彩38安卓-| www.883737.com-博友彩票客服| www.cx80.com-彩票密码-| www.j40.club-皇马彩票手机app| www.371868.com-500彩粟网-| www.313973.com-首页竞彩网-| www.4412.vip-中国足球彩票返奖率| www.9764.in-七星彩晴予预测号码| www.633479.com-5分快三预测| www.687533.com-58福彩是正规的吗| www.946543.com-68彩票客户端下载| 大赢家彩票平台www.068639.com| www.736.red-盈博彩票是正规的吗| www.4338.wang-华夏鑫彩合法吗| www.163700.com-nba体彩玩法| www.247832.com-谁有江苏快三微信群| www.335877.cc-黑彩为什么总是输钱| www.396263.com-温岭彩虹小镇| www.262775.com-快三十大口诀| www.728487.com-京东有卖彩票吗| www.791674.com-福利彩票单式和复式| www.850742.com-体彩卖到几点| www.896007.com-福彩3推荐号码| www.948415.com-青海快三豹子技巧| www.983251.com-网络彩票算不算赌博| www.mt50.com-春秋彩票app下载| www.385604.com-彩票停售原因| www.137449.com-1990彩票平台| www.192607.com-体彩11选5走势图| www.254082.com-快3彩票走势图| www.78er.cc-利泊彩票网站| www.56lw.com-七星彩定位号| www.0713.date-彩富中国足彩网| www.7288.hk-什么样的彩虹| www.726931.com-台湾褔星彩开奖| www.682765.com-彩票app哪个最好| www.ne12.com-vip彩首页-| www.059865.com-天天彩票论坛一肖中| www.132095.com-彩礼超过多少犯罪| www.09170.com-微信彩票竞彩夹娃娃|