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.k69.xyz-掌上七天彩下载| www.028341.com-彩票送彩金的网址| 网易彩票www.070wy.com| www.241.biz-时时彩后二稳赚方案| www.819723.com-特区七星彩网站| www.0146.xyz-色彩造句简单| www.011014.com-易迅彩票正规吗| www.160581.com-乐彩网摘网-| www.432654.com-高频彩调整新闻| www.798422.com-彩票怎么看号才中奖| www.451.cm-哪种彩票能中五百万| www.617991.com-彩票365手机网站| www.024427.com-于盛彩票-| www.884777.com-三彩彩票网站入口| www.111533.com-彩61下载安装| www.253719.com-今天快三推荐豹子| www.868872.com-海南七星彩预测专家| www.75699.cc-申航彩票骗局| www.5274.biz-派彩网20期-| www.7811.cm-彩民心得体会| www.308396.com-中福快三是哪里出的| www.506328.com-足球彩计算器胜负| www.663867.com-头彩-| www.825272.com-竞彩猫小鱼儿| www.966371.com-福彩排三走势图| www.cw53.com-广西快三走势跨度| www.761706.com-七乐彩胆拖投注玩法| www.368994.com-彩票体彩大乐透| www.266560.com-福彩3d图表-| www.24077.com-澳洲幸运5时时彩| www.335735.com-吉林快三经典彩| www.834389.com-炫彩浮屏什么意思| www.70np.com-什么彩票送注册金| www.4737.cn-500亿彩票平台| www.213777.com-彩神争霸app下载| www.970733.com-足球彩票手机新浪网| www.645755.com-新星彩手机版网址| www.777561.com-彩票不靠谱-| www.867569.com-快三分析大师| www.973562.com-彩虹宝宝免费| www.yo3.com-网络买彩票平台| www.ve97.com-江苏福彩app| www.98tr.com-纳音五行杀彩票号法| www.6214.shop-寄希望于彩票| www.42905.com-天津彩票快乐十分| www.927601.com-新彩吧3d字迷| www.964682.com-竞彩篮球推荐捷报| www.088168.com-快三开奖作弊器| www.3uk.com-彩票站打票员挣钱吗| www.79qs.com-陕西西安福彩机转让| www.022221.com-买彩票搞笑语句| www.137060.com-彩788在线玩| www.255255.cc-彩票.开奖-| www.355562.com-溧阳彩票站转让| www.445333.cc-排列五彩票图纸| www.563911.com-广西福利彩票官方网| www.670756.com-福利彩票造假视频| www.986109.com-今日足彩分析| www.5zh.com-中国彩票软件排名| www.948.bid-彩票店上班-| www.6122.cm-世界最容易彩票| www.21327.cc-新浪竞彩足球胜平负| www.72114.com-彩票怎么定胆| www.060760.com-私彩与官方彩票| www.176360.com-快三在线稳定计划网| www.304415.com-今晚大乐透彩票号| www.397429.com-神话彩票会员登录| www.505657.com-3d老虎彩报图| www.662469.com-全民彩票金币| www.761439.com-彩票中一亿交多少税| www.906635.com-彩票平台送彩金29| www.991551.com-旺彩彩票电脑版| www.u18.club-ab双平台彩票对冲| www.2036.cn-青岛市体彩彩票中心| www.31871.com-彩票3d魔图表| www.080342.com-彩8彩票安卓官网| www.688806.cc-体彩360导航| www.883708.com-湖北彩票彩王| www.901393.com-甘肃115爱彩乐| www.058591.com-棒彩坛万人高手社区| www.44655.com-网站彩票提现安全吗| www.97760.com-时时彩总代理| www.062725.com-体彩天下安装| www.130376.com-七星彩大彩网走势一| www.245148.com-青海快三下注平台| www.335643.com-红中彩票手机版| www.408861.com-18061期足彩| www.505459.com-浙江体彩六加一开奖| www.586108.com-谦喜彩票app下载| www.665616.com-彩票开奖快神器| www.729530.com-彩16安卓版时时彩| www.802712.com-深圳体彩中心app| www.880486.com-十分彩是传销吗| www.953511.com-玩快三输了两万| www.997674.com-极速时时彩计划技巧| www.uk2.cc-百宝彩软件-| www.qn97.com-北京福彩中心电话| www.08rs.com-福利彩票摇奖机| www.75qh.com-彩票测试-| www.2824.shop-怎么注销彩票账户| www.871472.com-彩票大发快3计划| www.948406.com-福彩几点开奖| 吉利彩票www.80075p.com| www.25537.cc-彩客足彩比分直播| www.1ml.com-买彩票不中奖| www.62xy.com-体彩你中奖是真的吗| www.0510.site-江苏体彩站点查询| www.6080.live-釉上彩怎么画视频| www.12898.cc-百度彩票贴吧| www.81585.cc-快三两同号统选| www.079077.com-七乐彩胆拖选号器| www.37926.com-六禾彩开奖结果记录| www.93668.cc-微彩娱乐登入| www.071956.com-体彩扑克3奖金| www.791700.com-七乐彩中奖数据查询| www.780638.com-体彩排列3彩吧预测| www.071578.com-转让彩票店不能更名| www.344.online-彩票最大中奖金额| www.792600.com-广东福彩中心主任| www.883469.com-威尼斯飞艇彩票| www.960618.com-最大的彩票网站排名| www.si.com-快三是什么软件| www.434991.com-体育彩票好做吗| www.10107.cc-微彩吧怎么下载| www.53155.cc-福彩15选5开奖号| www.035583.com-红彩会-| www.123286.com-福彩3d5d速查表| www.568205.com-彩票51中彩靠谱吗| www.984074.com-2018027福彩| www.179018.com-大发快三秘籍| www.8959.loan-手机彩票计划免费版| 福利彩票www.8039z.com| www.552073.com-爱彩乐官方是真的吗| www.49773.com-西安体彩在哪里兑奖| www.310567.cc-云南快三走势图表| www.400412.com-七星彩今晚开奖规律| www.507375.com-贵州快三和图表| www.452264.com-体彩中一亿大奖得主| www.8475.xyz-亿彩彩票公平吗| www.7215.loan-35彩票的另外网址| www.1hj.com-千百万彩票下载| www.22868.com-福彩3d骗局-| www.148.win-彩虹马图片什么含义| www.496992.com-福彩双色球中一个| www.071502.com-人人买彩票电话号码| www.152337.com-乐彩彩票安卓版| www.616494.com-体育彩票代码| www.692519.com-6678彩票平台下| www.776338.com-欢乐彩骗局-| www.851198.cc-竟彩首页-| www.gx11.com-彩票大全360| www.ze74.com-时时彩直播现场开奖| www.41me.com-划归七星彩-| www.0797.net-高手彩票、彩票高手| www.8097.vip-优信彩票投注| www.39193.com-金牛彩票下载| www.p97.net-搏大彩票-| www.52kg.cc-近50期足彩星象图| www.0008.wang-买彩票有几位数| www.6078.cn-奇门测祘彩票| www.29599.cc-七乐彩基本走势图一| www.91372.cc-焕彩美白面膜| www.111442.com-甘肃快三技巧| www.232968.com-五百万彩票网资讯|