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.368608.com-爱购彩票真实平台| www.687073.com-中国体彩网湖南| www.651888.com-彩票收入-| www.456402.com-彩易达业绩-| www.180896.com-豪彩app下载| www.339852.com-梦见彩票中了三十万| www.773958.com-天天彩票qq交流群| www.954174.com-礼拜五开奖的彩票| www.cv09.com-搭建网络时时彩平台| www.67xq.com-自制化妆品彩妆| www.603576.com-淘宝购物彩票退货| www.73699.com-世界杯彩票哪里购买| www.072858.com-9b彩票值得信赖| www.576427.com-彩吧明儿福彩三d| www.681263.com-掌中彩掌中彩安卓版| www.776377.com-时时彩四星教程| www.869179.com-七星彩奇偶-| 99彩票www.577032.com| www.262198.com-皇都彩票有被骗的吗| www.698134.com-彩民堂计划软件| www.q81.club-广东体彩网限号| www.23525.cc-彩神争霸88-| www.545646.com-青岛彩票站转让信息| www.yl61.com-彩票开奖查询排列五| www.36690.cc-澳门有彩票吗| www.iq63.com-时时彩平台出售| www.8by.com-大玩家网上彩票平台| www.3596.cc-南方双彩网大乐透了| www.5900.net-地区快三计划软件| www.3292.biz-三d彩宝贝走势图| www.929342.com-盈彩在线下载安装| 500彩票www.50052b.com| www.9839.in-古建室内彩画| www.m81.top-33彩票是黑平台吗| www.16322.cc-彩客站贴吧-| www.986187.com-口袋足球竟彩| www.sk72.com-新时时彩是哪的| www.333125.com-体彩最新开奖号码| www.050245.com-黑彩定罪-| www.fh16.com-3号彩票平台正规吗| www.36223.cc-体彩十期数据试机号| www.bl20.com-大小单双彩票的骗局| www.69hr.com-乐彩彩票论坛| www.657054.com-彩票二维码有什么用| www.752760.com-彩票如何刷流水| www.870645.com-易旺彩票地址| www.947414.com-竞猜型彩票有哪些| www.cai0123.com北京快三和值| www.nz39.com-竞彩网任9-| www.x85.me-彩8娱乐-| www.391198.com-龙胜彩票下载平台| www.506166.com-彩票黑客论坛| www.076983.com-极速快三直播| www.721231.com-新宝彩票手机官网| www.850287.com-中国竞彩足球首页| www.953629.com-旺角彩票-| www.l88.link-天天彩票安卓版| www.667682.com-福利彩票被逮事件| www.772029.com-多彩贵州招聘| www.870176.com-福彩30万是真是假| www.943603.com-99福彩下载安装| www.998875.com-汇彩app苹果版| www.dh78.com-体育彩票要几位数| www.sr19.com-台湾时时彩骗局揭秘| www.02cj.com-彩虹幼儿涂色| www.la28.com-彩神争霸yg888| www.373459.com-九州全球彩票网址| www.497380.com-家彩网试机号开机号| www.674674.com-财政部互联网彩票| www.be53.com-喜乐彩开奖结果| www.072226.com-秒速时时彩的真假| www.139967.com-中国福彩兑奖| www.220026.com-一分快三投注技巧| www.75456.com-彩妹双色球预测专栏| www.00067.cc-彩娃彩票app官网| www.45289.cc-大快发彩票-| www.916225.com-时时彩注册送38元| www.ds49.com-自助彩票机合法吗| www.13dl.com-伯乐彩票平台| www.370364.com-吉林快三每天几期| www.979868.com-河南快三昨天开奖| www.sq13.com-双色球预测新彩网| www.86qb.com-360竟彩直播| www.4196.org-七彩课堂语文电子版| www.72407.com-彩票导航-| www.7pw.com-竞彩彩民平局心得| www.531974.com-临沂福利彩票中奖| www.779434.com-六台彩迷宫五花八门| www.7878.la-吉林快三总共几期| www.876778.com-时时彩开奖结果网站| www.9805.cm-足彩缩水软件哪个好| www.047342.com-快三单双技巧顺口溜| www.287537.com-网上刷彩票靠谱吗| www.887927.com-时时彩群推广| www.hw62.com-北京彩票站-| www.029.pink-彩票一号店软件下载| www.9117.cm-中大奖彩票站分多少| www.00795.com-快三走势图中奖| www.fa27.com-678彩票-| www.756191.com-排三乐彩字图谜论坛| www.784779.com-大胜彩票苹果版| www.164455.com-竞彩篮球推荐足彩网| www.678682.com-竞彩足球彩票技巧| www.525544.com-重庆福彩投注站查询| www.588217.com-乐迎彩票注册网址| www.890956.com-至尊争霸app彩票| www.997504.com-快三邀请码怎么获得| www.662096.com-3彩报-| www.qg23.com-8亿彩票下载| www.ky32.com-好运彩app下载| www.274242.com-全天重庆彩计| www.877540.com-七乐彩十大专家预测| www.027969.com-工益福彩-| www.52yp.com-被91彩站联盟骗了| www.051773.com-发彩网代理-| www.3103.vip-彩票体彩开奖时间| www.854425.com-篮球竞彩新浪博客| www.kb70.com-网上福彩是真的吗| www.rz2.cc-福彩快三有人赚过吗| www.752635.com-天天乐购彩票平台| www.981751.com-大成彩网是真的吗| www.890.cm-利用时时彩诈骗案例| www.58098.com-福彩消消乐机器人| www.210215.com-我要做吉林快三代理| www.269122.com-98彩票是不是诈骗| www.630765.com-剪彩花球开业庆典| www.690171.com-竞彩足球凯利方差| www.752014.com-中彩了app-| www.806182.com-福彩3d彩吧图迷3| www.869548.com-海南七星彩投注网址| www.948726.com-鑫彩网彩票注册官网| www.984608.com-彩虹8彩票是正规吗| www.gv99.com-中国体彩官网下载| www.980257.com-买彩票有没有必中的| www.ep34.com-新华彩票下载| www.341885.com-诺亚彩票不让提现| www.610553.com-河北体彩快三玩法| www.lp25.com-中彩吧2020平台| www.274890.com-也买彩app下载| www.728743.com-辽宁福彩网首页| www.831066.com-577彩票怎么下载| www.910119.com-天空彩高手抡坛| www.70333.com-彩票自助销售终端| www.307870.com-派彩网走势图网页| www.374886.com-福利彩票计算器下载| www.464871.com-彩票是怎么个玩法| www.534590.com-福彩开奖频道| www.174544.com-快彩app官网| www.33576.cc-足彩第19042期| www.8362.loan-霓虹焕彩-| www.49698.cc-买排球竞彩-| www.028049.com-娜彩快开平台在哪| www.144175.com-竞彩单关都博平局| www.129904.com-重庆体彩大乐透购买| www.62269.com-体彩大赢家下载| www.134848.com-亚彩会平台登录| www.268118.com-足球彩票竞技| www.d85.club-乘风网彩票能提现吗| www.42ao.com-福彩三十六选7彩值| www.177187.com-分分快三计划软件| www.8780.biz-七星彩南国走势图| www.699.cc-篮球彩票开奖结果| www.71571.cc-有没有彩票qq群| www.1975.vip-银川仟彩摸吧包厢|